Editing product layout on my website

[Peter789]

Hello!

I don’t like how my products are shown in my Shop page. I want to make it look modern.

Is there a way I can make a custom product layout if that’s how it’s called… and how?

Please help me

Kind regards,
Katarina

[ruenel]

Hello Katarina,

Thanks for writing in!

Regretfully we do not have any editor for the product columns. It may only possible by custom development adding custom CSS to each of the product items. You will have to remove the box shadow, apply a solid border and adjust the border radius. You need to add CSS code into X > Theme Options > CSS.

You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use. The product items uses entry-product CSS class wrap with the following container .woocommerce li.product. Therefore a proper CSS selector for the product items will be:

.woocommerce li.product .entry-product{
    box-shadow: none !important;
    border: solid 15px #000 !important;
    border-radius: 10px;
}

Feel free to add whatever CSS code you like inside the selector. To learn more about the box-shadow, border and border radius CSS property, kindly check this out

• https://www.w3schools.com/cssref/css3_pr_box-shadow.asp
• https://www.w3schools.com/cssref/pr_border.asp
• https://www.w3schools.com/cssref/css3_pr_border-radius.asp

The code above is just an example and will be a good starting point. If you are interested you can learn more about CSS selectors and details here

Note: If you are unfamiliar with code and resolving potential conflicts, you may select our One or Care service for further assistance. We are unable to provide support for customizations under our Support Policy.

Thank you for your kind understanding.