[Support request] How to make woocommerce items light up

Home Forums Support How to make woocommerce items light up

  • This topic has 7 replies, 2 voices, and was last updated 4 months ago by Leo.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1454296
    kyle

    hey guys,

    Is there any css that will make my woocommerce products on the home page light up like on the PRIME theme.

    #1454303
    Leo
    Staff
    Customer Support

    Hi there,

    Prime is using this CSS:

    .woocommerce ul.products li.product, .wp-block-columns.contact .wp-block-column {
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
        border: 1px solid #ddd;
        transition: all 0.1s ease-in;
        border-radius: 3px;
        box-sizing: border-box;
    }
    .woocommerce ul.products li.product:hover, .wp-block-columns.contact .wp-block-column:hover {
        box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.1);
    }

    More info on Prime here:
    https://gpsites.co/prime/about/

    You can always use the browser inspector tool to see the CSS involved.

    #1454310
    kyle

    Thanks, Leo

    I added the CSS, but the buy product button is right on the edge of the border, how can i get a space there?

    Also is there any way to make the products in the homepage do the same?

    #1454318
    Leo
    Staff
    Customer Support

    You can try adding some padding in this block of CSS:

    .woocommerce ul.products li.product, .wp-block-columns.contact .wp-block-column {
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
        border: 1px solid #ddd;
        transition: all 0.1s ease-in;
        border-radius: 3px;
        box-sizing: border-box;
    }

    As for the home page, it’s using WooCommerce block so you will need to find the correct selectors (by using the browser inspector tool) and apply the same CSS to them.

    #1454330
    kyle

    Hi Leo, it doesn’t look like that works. Must a replace that CSS with the last one?

    Also, with regards to the homepage, I don’t quite understand how to do that?

    #1454336
    Leo
    Staff
    Customer Support

    You need to add some padding style to the CSS like this:

    .woocommerce ul.products li.product, .wp-block-columns.contact .wp-block-column {
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
        border: 1px solid #ddd;
        transition: all 0.1s ease-in;
        border-radius: 3px;
        box-sizing: border-box;
        padding: 20px
    }

    As for the home page, we can’t really provide custom CSS help for content coming from another plugin unfortunately. But if you right-click on the element and use the browser inspector tool, you should be able to find the selector needed and apply the similar CSS to them:
    https://www.screencast.com/t/vn1QL048Aq

    The other solution is to use WooCommerce shortcode instead of block then the same CSS I provided should apply:
    https://docs.woocommerce.com/document/woocommerce-shortcodes/

    #1454349
    kyle

    I’m not sure I understand how to open the inspector tool. Also, as for the shortcode can you send me an example of what the shortcode looks like?

    #1454373
    Leo
    Staff
    Customer Support

    An article like this might be useful:
    https://www.templatemonster.com/help/use-google-chrome-web-inspector.html

    Lots of other online resources on the same topic as well.

    As for shortcode, did you take a look at the article above?

    It includes examples like this:
    https://docs.woocommerce.com/document/woocommerce-shortcodes/#section-11

    We have to be careful with providing support for other plugins/products here as they have their own support team:
    https://www.screencast.com/t/xllIjblQas

    Thanks for your understanding 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.