Image colored background—AJAX Products Tabs

Hi,

To change the background color of product grid items. You can use the below CSS code in your global custom CSS area under theme settings:

.product-grid-item .hover-img img{
background: red;
}
.product-grid-item .product-element-top{
background: red;
}

Result: https://jmp.sh/1IteKxU

Remember that the images must have a transparent background like .png images. Otherwise the background color can’t be seen. Also I just used “red” color just to set an example for you, you can use any other color of your choice.

02. Go to theme setting> Product Archive> Product Grid: Here you can set the spacing between the products: https://ibb.co/5TjFPd8

Best Regards.

Hello,

Actually, to add space between the Products for the AJAX Product Tabs element > you need to edit the respective element > go to Style tab > under that open the Products layout > in that you can find the option of Space between to define Space between Products: https://snipboard.io/vDiRdF.jpg

Best Regards.

Hello,

Sorry to say but your Site WP-ADMIN Logins aren’t working now.

Further, as you can see in the following Image from our Test Site: https://snipboard.io/j8yIlr.jpg

We have used the same AJAX Products Tabs element there > with Space between defined > the space is generated between Products accordingly as selected through option which we mentioned you earlier.

So, this option for this Element is for adding space between Products.

Best Regards.

Most Welcome!!!.

We are glad that you managed to do the workaround yourself. You are great 👍

Feel free to contact us, if you need any further assistance. We are always there for your help.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.