How do I edit how my product layout are displayed?

[Peter789]

Hello there,

There’s a limit with editing the product layout (how the products are presented)

[nabeel]

Hi Katarine,

Thank you for reaching out to us. Since you’re using a shortcode, you can only customize it using it’s available options in the shortcode which WooCommerce provides (see https://docs.woocommerce.com/document/woocommerce-shortcodes/)

To override the default styling, this would require custom CSS as this is not a theme feature by default and is outside of our support scope, but we will do our best to help you getting started with the customization but we will not be able to implement it.

I see you’ve assigned a class latest-products to your [products] shortcode, now you can use the this selector .latest-products li.product to apply the box-shadow on the product item e.g:

.latest-products li.product {
    box-shadow: 1px 16px 16px 2px rgb(0 0 0 / 38%);
}

To learn more about box-shadow property and how to change it, please visit https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

Please note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Thank you for understanding!

[Peter789]

Hello,

This does not help me at all… can you make it easier for me to understand, I am sorry but I am new to this

[friech]

Hi Katarina,

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Thanks,