Return to previous page

Product listing layout editor - by Adrian

This topic has 5 replies, 2 voices, and was last updated 4 years, 1 months ago ago by Adrian

Adrian

Participant

January 18, 2021 at 07:54

How can I edit the product listing’s layout settings like margin, padding, image size, etc (let’s say I’d like to reduce the distance between each product so they appear more compact)?
I’m already aware of “Product style” tab from Xstore Editor and I’m looking for a more advanced customization option.

The product listing I’m referring to:
https://prnt.sc/x3s1t3

Thank you.

#268863 Copied Theme version: 7.2 WooCommerce version: 4.8.0

4 Answers

Olga Barlow

Participant

January 18, 2021 at 17:27

Hello,

There is no option to edit distance between products, unfortunately. Min padding between products is 30px (default padding between columns for templates based on bootstrap). If you want to increase padding you can do this using custom CSS if you have CSS skills.
Product image size you can manage from Customizer > WooCommerce > Product Image.

Regards

#268990 Copied

Adrian

Participant

January 19, 2021 at 03:49

Hello,

Thank you for your response.
If you could point me to where I can find the necessary CSS file/class to edit or a documentation that would be a great help.

Thanks.

#269040 Copied
Olga Barlow

Participant

January 19, 2021 at 12:49
Hello,

You can use Theme Options > Custom CSS to add the custom CSS styles.
For example

.products-grid .col-md-4, .products-grid .col-lg-4, .products-grid .col-xs-5, .products-grid .col-xs-6, .products-grid .col-sm-6 { padding-right: 0; padding-left:0; }

If you don’t have CSS skills I don’t think that you’ll be able to edit it. It would be better to submit customization request here to help from professionals.

Regards
#269101 Copied
Adrian

Participant

January 20, 2021 at 10:38

Hey there thank you.
I’ll consider it.

#269241 Copied
Viewing 5 results - 1 through 5 (of 5 total)