Return to previous page

XStore – How to put a thin grey border around products please?

This topic has 24 replies, 3 voices, and was last updated 5 years, 3 months ago ago by Rose Tyler

Robert

Participant

January 24, 2019 at 02:22

Hello

I would like to enable a border around products. This is because some products on the site have a white background, and some don’t, so it would be good to allow the products to have a clearly defined border around them, so they look more uniform.

I think this was a suggestion made a year or two ago, but I can’t find any setting that turns borders on and off in the theme options. If there is one, please let me know, else what is the code to achieve this via custom ccs?

Regards

#207988 Copied Theme version: 5.1.1

23 Answers
Rose Tyler

Support staff

January 24, 2019 at 08:15
Hello,
```
.content-product .product-content-image img {
    border: 1px solid #e1e1e1;
}
```
Regards
#207992 Copied
Robert

Participant

January 24, 2019 at 08:45
Hi

Thanks for your reply. But the solution not changing anything, even after refreshing bowser cache and CDN cache.

I even changed it to add the !important attribute, but no change:
```
content-product .product-content-image img {
    border: 1px solid #e1e1e1 !important;
}
```
Regards
#207998 Copied
Rose Tyler

Support staff

January 24, 2019 at 08:48

Please provide your site URL so I can take a closer look.
Make sure that you added the code correctly – https://prnt.sc/mbeyc3

Regards

#207999 Copied

Robert

Participant

January 24, 2019 at 09:05

Please see private content for login details to staging site. I changed the border colour to red to make it show up, but no change.

Please contact administrator
for this information.

#208000 Copied

Robert

Participant

January 24, 2019 at 09:26

Arrrgh! yes, just noticed your screenshot, I missed out the dot. It’s working now. Sorry for the confusion. I had copied and pasted your code into Dreamweaver and missed out the dot somehow. LOL.

Your chosen shade of grey works very well.

Many thanks! 🙂

#208001 Copied

Rose Tyler

Support staff

January 24, 2019 at 09:27

You’re welcome!
Have a nice day.

Regards

#208002 Copied

Robert

Participant

January 24, 2019 at 09:32

Sorry, I just noticed that the border is showing up on Home page and the Shop page, but not on the product page. Please can you advise how to fix that?

#208003 Copied
Rose Tyler

Support staff

January 24, 2019 at 09:35
Please change the previous code to:
```
.content-product .product-content-image img, 
.single-product .main-images a img {
     border: 1px solid #e1e1e1;
}
```
Regards
#208004 Copied
Robert

Participant

January 24, 2019 at 09:49

Thanks

That works for the main large image of the product on the single product page, but not other thumbnails on the same page.

For example, in the widget area “Single product page Sidebar’, I added the 8Theme Products Widget. This displays some product thumbnails in the sidebar. These do not have a border. See screenshot:

https://prnt.sc/mbfq6a

Also, if a product has multiple images, the small thumbnails underneath the main large image also do not have a border.

#208005 Copied
Rose Tyler

Support staff

January 24, 2019 at 10:01
```
.content-product .product-content-image img, 
.single-product .main-images a img,
.sidebar-widget .products-widget-slider img,
.single-product .swipers-couple-wrapper .swiper-wrapper img {
     border: 1px solid #e1e1e1;
}
.single-product .swipers-couple-wrapper .swiper-wrapper img {
    margin-top: 3px;
    margin-bottom: 3px;
}
.single-product .swiper-container-autoheight .swiper-wrapper {
    padding-bottom: 6px;
}
```
Regards
#208008 Copied
Robert

Participant

January 24, 2019 at 10:31

Thanks. On first look, it appeared to work. However, when I added extra images to a product to see how the thumbnails underneath were displayed, it caused the right hand border of the main image to initially be displayed when the page was loading, but when all other elements of the page loaded the right-hand border of the main large image disappeared. Also one of the small thumbnails underneath has one side of the border missing too.

This happens on Google Chrome on a 1920×1080 monitor, with the browser maximised. When I make the browser screen smaller, it re-adjusts and then displays the borders as they should be displayed. This seems weird. Not sure why this is happening???

please see the screenshot:

https://prnt.sc/mbgb1m

Please can you investigate, seems like a bug? See private content for link to product page.

Please contact administrator
for this information.

#208011 Copied
Olga Barlow

Support staff

January 24, 2019 at 11:39
Hello,

We have improved the code on your site. Correct one is
```
.content-product .product-content-image, .sidebar-widget .products-widget-slider a.product-list-image, .single-product .swipers-couple-wrapper .swiper-wrapper .woocommerce-main-image, .single-product .thumbnails-list .swiper-slide a {
     border: 1px solid #ff0000;
}
```
Clear CDN cache to apply changes.

Regards
#208018 Copied
Robert

Participant

January 24, 2019 at 11:51

Thanks. I’m still having the problem with the right-hand border not always displaying, as mentioned in my previous post. Please see screenshot in the previous post.

Note – I did refresh browser and CDN cache.

#208021 Copied

Rose Tyler

Support staff

January 24, 2019 at 12:03

Please clear cache and check one more time.

Regards

#208023 Copied

Robert

Participant

January 24, 2019 at 12:46

Hello Rose

The fix worked on the staging site that I use for testing updates before using them on my live sites, but has not worked on the live site its intended for. The site it worked on was the login details I provided you, not my actual site.

Was there something else you did on my test site to fix that other than the code you provided above? The custom css is the same for both and browser/CDNcache refreshed for both sites, but fix only works on one site. I am confused, unless there is something you did I am not yet aware of?

#208027 Copied

Rose Tyler

Support staff

January 24, 2019 at 13:25

Hello,

Yes, please check code in Appearance > Customize > Additional css area.

Regards

#208030 Copied

Robert

Participant

January 24, 2019 at 14:08

Thank you for that. Using the code found there in the other site fixed the problems on the single product page.

Going back to the Home Page, I have noticed one last place that borders are not quite correct. The area displaying ‘Best Sellers’ is missing the bottom border. See screenshot:

https://prnt.sc/mbjoz1

The other sections of the Home Page appear to be displaying the border correctly for products, it’s just this remaining section.

Also, the code you mentioned on “Appearance > Customize > Additional css area”… can that code be placed in custom css with the other code? Not sure why its there?

Please tell me, are these border problems something you consider an issue that will be resolved in the next theme update?

#208033 Copied

Olga Barlow

Support staff

January 24, 2019 at 16:08

We added some code to WP custom CSS because we can’t see our changes because of the CDN on your site if we use Theme Options custom CSS area (file with the custom styles is cached, inline WP styles are not cached).
We changed the code in Theme Options, check again. Could you also disable the CDN for the dev site?

Regards

#208036 Copied

Robert

Participant

January 24, 2019 at 20:14

Hi
To both Olga and Rose…. thanks for explaining and thanks for your patience with this issue. The CDN is Cloudflare and I think it definitely causes problems with WordPress. As you suggested, I disabled Cloudflare caching temporarily, deleted browser cache and this fixed the issue for both the live site and dev sites. I have now re-enabled Cloudflare caching and both sites are still working, so i think its fixed. If ever I get problems with appearance not looking how it should, I will from now on remember the Cloudflare issue. Cloudflare has a button to clear cache, which did not appear to work fully. Some things seemed to change, like changes in colour of borders, but not other changes. Very weird.

Thanks for all your help.

#208041 Copied
1 2

Viewing 20 results - 1 through 20 (of 24 total)

The issue related to '‘XStore – How to put a thin grey border around products please?’' has been successfully resolved, and the topic is now closed for further responses

XStore – How to put a thin grey border around products please?

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection