Simply adding a colour background to products in any grid

This topic has 20 replies, 2 voices, and was last updated 4 years, 4 months ago by Elise Noromit.

Viewing 21 posts - 1 through 21 (of 21 total)

Author

Posts
June 22, 2020 at 3:45 pm #205445

Richie M
Participant

I can’t seem to find out where I can add a simple colour to the information area in grid just like the highlighted area in the first screenshot Ive tried to use css for this but its defo in the wrong place again see other screenshot as it will not suit all category displays.

This is usually very simple in other themeplates however I can not figure it out with woodmart please help

.woodmart-spacing-30>article, .woodmart-spacing-30>div {
margin-bottom: 30px;
padding-right: 15px;
padding-left: 15px;
background-color: grey;
}

Attachments:
You must be logged in to view attached files.

June 22, 2020 at 8:00 pm #205481
Elise Noromit
Member
Hello,

If I understand you proderly, add this code to the Theme Settings > Custom CSS > Global:
```
body .product-grid-item {
   background-color:grey;
}
```
If it is not what you mean show the screen and borders of the area you want to change the color.

Best Regards
June 23, 2020 at 4:04 pm #205805

Richie M
Participant

No that is the issue I face the image is never set to full width so it looks very ugly and it does not go past the the add to cart button. I want to put a block color underneath the product image that slightly goes past the Add to Cart button. like the first image I sent you.

Attachments:
You must be logged in to view attached files.

June 23, 2020 at 9:10 pm #205857

Elise Noromit
Member

Hello,

Please provide your ligin URL wp-admin does not work.

I will check if there is any possibility to do it with the CSS

Best Regards

June 24, 2020 at 10:27 am #206010

Richie M
Participant

You can click the little lock button to login or login the traditional way threw wp-admin

June 24, 2020 at 2:38 pm #206163

Elise Noromit
Member

Hello,

wp-admin does not work https://prnt.sc/t5otkz when I enter I am redirected.

Best Regards

June 24, 2020 at 4:07 pm #206185

Richie M
Participant

I’ve removed the maintenance plugin there are not login issues my end so I dont see what the issue is with you guys

June 24, 2020 at 8:23 pm #206232

Elise Noromit
Member

Hello,

Please deactivate all the plugins not related to the theme, all the blocking settings. I can not login https://prnt.sc/t5uuq3

Best Regards

June 25, 2020 at 2:22 pm #206450

Richie M
Participant

I’ve disabled all security for now Your College was able to login without me having to do that please reply once you are finished thanks

June 25, 2020 at 9:02 pm #206505
Elise Noromit
Member
Hello,

Here is what is possible to do with custom CSS: https://prnt.sc/t6jnzf

If you like it, add this code to the Theme Settings > Custom CSS > Global:
```
body .product-grid-item {
    background-color: grey;
    padding: 0!important;
}
.woodmart-hover-standard .woodmart-add-btn {
    margin-bottom: 10px;
}
body .labels-rounded {
    left: 27px;
}
```
Best Regards
July 1, 2020 at 2:04 pm #207853

Richie M
Participant

The Element “Product grid or carousel” offers a spacing option for product which works great however the element Product category do’s not so as you can see from my screen shots the main products are stuck together because of the css?

#edit. Never mind I just going to use product grid throughout site

Attachments:
You must be logged in to view attached files.

July 1, 2020 at 6:04 pm #207903

Elise Noromit
Member

Hello,

I cannot view your site, please disable the maintenance mode.

Best Regards

July 6, 2020 at 11:50 am #208938

Richie M
Participant

Hi There I think your code is effecting some elements currently I cant seem to get spaces between product in the feature product section. I need it to look like the tab system below it were the products are spaced out see the screen shot

Attachments:
You must be logged in to view attached files.

July 6, 2020 at 2:51 pm #208981

Elise Noromit
Member

Hello,

Have you set the gap between products in the element. Please provide the access and I will check if it is possible to have the gap.

Best Regards

July 6, 2020 at 3:38 pm #208997

Richie M
Participant

I have tried to set the element to 2 and even 30 but to no effect. Please take a look

July 6, 2020 at 10:20 pm #209045

Elise Noromit
Member

Hello,

I am afraid that we can hardly do anything with the carousel. Please consider using the Product Grid instead and I will check if it is possible to do with CSS what you need.

Best Regards

July 22, 2020 at 1:49 pm #213208

Richie M
Participant

Only getting to reply now but I still can’t get it to simply work that way I would like. I simply want to have a featured product area that the user can click or it slides threw the products. please see the attached image to see how I want it to function/ work. It seems every option just visually mess’s it up I dont know if this is due to the css you first provided.

Please take a look…

Attachments:
You must be logged in to view attached files.

July 22, 2020 at 2:49 pm #213237

Elise Noromit
Member

Hello,

You would better use the Product Grid / Carousel element, it has the option to show the featured product in a grid or in a carousel: https://xtemos.com/docs/woodmart/faq-guides/product-grid-carousel-element/

Best Regards

July 22, 2020 at 2:49 pm #213239

Elise Noromit
Member

Hello,

You would better use the Product Grid / Carousel element, it has the option to show the featured product in a grid or in a carousel: https://xtemos.com/docs/woodmart/faq-guides/product-grid-carousel-element/

Best Regards

July 22, 2020 at 2:52 pm #213242

Richie M
Participant

Thats what I’m using…..?

Hence me asking why I cant get it to display correctly

Please take a look at the screen shots nothing is working ?

Attachments:
You must be logged in to view attached files.

July 22, 2020 at 10:20 pm #213310

Elise Noromit
Member

Hello,

Please read the manual carefully. You will find the instruction on how to configure showing the sales product. Check the Data setting tab in the element.

By the way, if you want to use tabs, you would better take Product AJAX tabs. Each tab has the same options as the Product Grid.

Best Regards
Author

Posts