Okay
  Public Ticket #1771123
CSS code for product
Open

Comments

  • iandrlifestyle started the conversation

    Hello,

    I have installed this plugin (see bellow) to be able to not display product images and more but I would like to find the right css code for it (for all single-products images or only some of images if I want to). Please can you help me.

    PLUGIN: WooCommerce Product Details Customiser  (no longer updated since 4 years so I would prefer to find css codes):

    Toggle the display of various components on product details pages.

    Display (OR NOT DISPLAY IF LEFT UNCHECKED):
    Product Images (unchecked)
    Product Tabs
    Upsells
    Related Products

    Could it be something like this?

    .woocommerce .single-product .image { display:none !important; }

    or for one single-product image only:

    .woocommerce .single-product .image-id-8665 {
        display: none!important;
    }

    Thanks

    UPDATE:

    I saw a video that shows how to remove the placeholder, but I was wondering if I want to do this only for one product image, what could it be?

    WooCommerce. How To Remove Products Images Placeholder

    remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 ) ;

    Also, I found this: 
    https://wordpress.org/support/topic/remove-product-image-placeholder/

    But if I want to remove the placeholder only for few products, how will I do that let say for these products without removing the placeholder image for the rest of the products? :

    GREATEST GIFTS 2
    ID: 8665 

    BUDDHA SPIRIT
    ID: 8671

    02. Ask Me Like a Song | UNCONDITIONAL
    ID: 8648 

    08. Être Sans Âge (You Belong) | SPIRITUAL BEINGS ON A HUMAN JOURNEY
    ID: 8644

    Attached files:  printscreens for woocommerce question.pdf

  •  1,403
    Qode replied

    Hello, 

    We are sorry for the delay in responding. 

    The following custom CSS should do the trick if you want to remove images from all products: 

    .woocommerce.single-product .product .images {
        display: none;
    }
    .woocommerce.single-product .product .summary {
        width: 100%;
        float: none;
    }
    

    If you want to remove it from particular product only, you have to include unique product class. It can be found in the source code, when you inspect the product page using some browser inspector ( DevTools in Chrome - F12 -> Elements tab ): 

    https://monosnap.com/file/6dRW6I3GZNwn6WRNbLq79B10NnwZmQ

    ...use the following CSS, just replace product ID: 

    .woocommerce.single-product .product.post-517 .images {
        display: none;
    }
    .woocommerce.single-product .product.post-517 .summary {
        width: 100%;
        float: none;
    }

    Let us know if you need further assistance. 

    Best regards, 

    Qode

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  • iandrlifestyle replied

    Thank you, it works :)

    Yes, I have something else I need.

    I would like the css code to remove individually if I want for all the products or only one product.

    I mean maybe I will keep the reviews and share button for certain products and not for others or...

    Well, what would be the css code to remove all what you will see in the images in pdf file?

    Here are some css code that I found somewhere but it's not necessarly good for what I want.

    and also, very very important, I would like that it does the same for mobile phone, not just on regular computer. thanks

    .woocommerce .woocommerce_tabs .panel h2, .woocommerce .woocommerce-tabs .panel h2 {display:none !important}

    ul.tabs {display: none;}

    ul.products .count { display:none !important; }

    .woocommerce .product_meta {display: none;}

    p.woocommerce-result-count { display: none; !important; }

    form.woocommerce-ordering { display: none; !important; }

    add_filter('loop_shop_per_page', create_function('$cols', 'return 100;'));

    Thanks

    Attached files:  to remove individually.pdf

  •  1,403
    Qode replied

    Hello, 

    To remove those elements from all single products use the following custom CSS: 

    /* single product remove sku, cat, share, desc, reviews */
    .single-product .summary .product_meta, 
    .single-product .summary .social_share_holder, 
    .single-product .summary .woocommerce-tabs .description_tab, 
    .single-product .summary .woocommerce-tabs .reviews_tab {
        display: none;
    }
    

    If you want to remove them from particular product page, you have to use unique product class and add it to your CSS selector. It can be found in the < body > tag: 

    https://monosnap.com/file/R7oBZ5gq92hlr3HhAk1s0UTLFmAkDC

    For example, to remove them from this product page: 

    https://anael.auctions-encheres.com/product/tones-of-creation-131313/

    ...the CSS should be: 

    /* single product remove sku, cat, share, desc, reviews */
    .single-product.postid-8672 .summary .product_meta, 
    .single-product.postid-8672 .summary .social_share_holder, 
    .single-product.postid-8672 .summary .woocommerce-tabs .description_tab, 
    .single-product.postid-8672 .summary .woocommerce-tabs .reviews_tab {
        display: none;
    }
    

    Hope this helps. 

    Best regards, 

    Qode

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  • iandrlifestyle replied

    Thank you for your answer.

    But what if I want to keep SKU but remove CAT?

    For now, if I put ........  product meta, the SKU and the CAT are removed, but if I want only CAT to be remove and keep SKU, is there a way ?

    Also, in my previews email, I did ask you how to remove sort by   and also Showing 1–12 of 16 results 

    and, I would like to know how to show the 16 products on one page instead of 12

    https://anael.club/shop/

    Thanks