Return to previous page

I would like to Remove borders on the listings

This topic has 26 replies, 3 voices, and was last updated 2 months, 2 weeks ago ago by Andrew Mitchell

Elhadj07

Participant

July 26, 2024 at 03:32

Hello,

Could you please help me with these issues:

1 – I would like to remove listings borders on shop, old recommended ( now called you may like ) and old Related products section ( Now People also bought).

I removed borders on home page listings but I can’t find where to remove on shop and the other sections I mentioned above.

2 – I would like to display the wishlist at the top right side edge of the images. Like the screenshot i attached from a page of gymshark website. I wrote on the image as well what I need help with.

I would like the wishlist icon background in round shape white and the wishlist icon in black.

I would like it displayed on all images not just when you hover over.

3 – The fire emoji on the fake sale booster. Is there a way to change it if so how can I change please.

I have included a png fire icon that I would like if you could help.

4 – I would like the promo bar on top header visible on mobile as well. It’s only visible on desktop.

5 – I would like to know how to link the customer testimonials and running text I have by the footer linked to the footer.

You helped me with that previous by linking the black bar to footer. Could you please explain how I could link the customer testimonials section and running text to the footer as well.

Thanks very much for the support.

Please, contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#407036 Copied Theme version: 9.3.15

25 Answers

Elhadj07

Participant

July 26, 2024 at 16:12

Hello, I am still waiting for your support.

Thanks

Please contact administrator
for this information.

#407183 Copied

Elhadj07

Participant

July 28, 2024 at 02:41

Hello,

I asked chatgpt and was able to fix the 5th question regarding linking the customer testimonials…, to the footer.

If you could help with the other remaining questions I mentioned please.

Also I would like to hide the add cart button on ( You May Like , and People Also Bought Section).

If you can help with that. I was able to do it for shop page but I can’t find an option to hide the add to cart boutton at ( you may like and People also bought).

I think I may need a custom css for that?

I have included an image.

Thanks very much!

Files is visible for topic creator and
support staff only.

#407289 Copied
Luca Rossi

Support staff

July 28, 2024 at 05:19
Hi @Elhadj07,

1. Please try adding this custom CSS codes under XStore > Theme Options > Theme Custom CSS > Global CSS:
```
body .content-product,
body .etheme-product-grid-item {
    border: none !important;
}
```
2. Please add this custom CSS:
```
.etheme-product-grid-item footer {
    bottom: auto;
    top: 0;
    right: 0;
}
```
3. Please go to your Item Sold Fake Indicator settings, replace the

{fire}

with

<span></span>

Screenshots: https://prnt.sc/XSaxjDhTk9zr. After that add this custom CSS:
```
.single-product .sales-booster-total-sales {
    display: flex;
}

.single-product .sales-booster-total-sales span {
    background: url(https://uxwing.com/wp-content/themes/uxwing/download/e-commerce-currency-shopping/hot-icon.png) no-repeat center center;
    background-size: contain;
    width: 25px;
    height: 25px;
    margin-right: 10px;
}
```
4. Please edit your header on mobile mode, then add the Promo Text element to the Top Header on mobile: https://prnt.sc/rFW7mDlYqLdK.

Best Regards,
The 8Theme Team.
#407303 Copied
Elhadj07

Participant

July 28, 2024 at 14:36

Hi Luca,

I hope you are well?

1 – I added the custom css for the fake sale booster.

But the text is not aligned in the center as it was originally and also the fire icon is little bigger and not in the same place and level as it was before. How can I fix that please?

Also the fire icon not visible on the shop page just on the ” people also bought ” section I can see the fire icon.

2 – The wishlist icon on the images I would like it sticky not just visible when you hover over. Also how can I remove the background of the wishlist icon on the image so that it’s just the icon visible ?

3 – I would like to hide the ” add to card ” boutton. At the ” You May Like ” , and ” People Also Bought ” Section.

I have included images for your reference.

Thanks very much for your support.

Please contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#407386 Copied

Elhadj07

Participant

July 28, 2024 at 15:00

One more thing. The top header I set it to full width on mobile just as is on desktop. But it’s not full width on mobile.

Thanks very much!

Files is visible for topic creator and
support staff only.

#407395 Copied
Luca Rossi

Support staff

July 29, 2024 at 09:05
Hi @Elhadj07,

1. Please find this custom CSS:
```
.single-product .sales-booster-total-sales {
    display: flex;
}

.single-product .sales-booster-total-sales span {
    background: url(https://uxwing.com/wp-content/themes/uxwing/download/e-commerce-currency-shopping/hot-icon.png) no-repeat center center;
    background-size: contain;
    width: 25px;
    height: 25px;
    margin-right: 10px;
}
```
And change to this:
```
.sales-booster-total-sales {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sales-booster-total-sales span {
    background: url(https://uxwing.com/wp-content/themes/uxwing/download/e-commerce-currency-shopping/hot-icon.png) no-repeat center center;
    background-size: contain;
    width: 25px;
    height: 25px;
    margin-right: 10px;
}
```
2. Please also add this custom CSS:
```
.etheme-product-grid-item .footer-inner {
    justify-content: end;
}
body .etheme-product-grid-item footer {
    top: 0;
    right: 15px;
    bottom: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}
body .etheme-product-grid-item footer a {
    background-color: transparent !important;
}
body .etheme-product-grid-item footer a .et-icon::before {
    color: #000 !important
}
```
3. We’ve added the inline CSS codes for you, the add to cart buttons are now hidden on 2 sections. Please check: https://prnt.sc/RnaDWoMKvgKX

4.

One more thing. The top header I set it to full width on mobile just as is on desktop. But it’s not full width on mobile.

Please add this custom CSS codes:
```
body .mobile-header-wrapper .header-top .et-row-container.et-container {
    padding: 0
}
```
Best Regards,
The 8Theme Team.
#407497 Copied
Elhadj07

Participant

July 29, 2024 at 13:29

Hi Luca,

1, 3 and 4 are good thanks.

Just the 2 – I would need further help because not as I wanted yet.

A – on the home page products ( Trending Now, and best sellers ). I want to remove the shop icon and move the wishlist icon there.

If have included an image from the ( People May Like section ). I want the wishlist icons of all shop and home page listings be like that same size. And permanently visible there and not just when you hover over it. If you get what I mean.

I have included images for your reference and wrote on to them.

Thanks a lot for your support.

Files is visible for topic creator and
support staff only.

#407589 Copied

Elhadj07

Participant

July 29, 2024 at 18:23

Hi Again Luca,

Regarding the question 2 for the wishlist icon. I have removed the previous css code to revert it back to where it was initially.

I want instead to do like on this gymshark listing image I have attached below.

“Cart icon in left side top in white circle background cart icon in black”

“Wishlist Icon in right side top in white circle background, wishlist icon in black”

I would like these visible on all listings. ( home page – Trending Now & Best sellers ).

On shop page listings. And product page ( You May Like & People Also Bought )

Would you be able to guide through how i could achieve this please.

Thanks very much!

Files is visible for topic creator and
support staff only.

#407663 Copied

Luca Rossi

Support staff

July 30, 2024 at 04:30

Hi @Elhadj07,

Before we provide the new custom CSS codes. We would to confirm that you want the wishlist(heart) icon appears on the right and the add-to-cart button appears on the left. They always display no need to hover to show?

Thank you!

#407696 Copied

Elhadj07

Participant

July 30, 2024 at 05:00

Hi Luca,

Yes that’s how I would like. They always display no need to hover show.

Thanks very much!

#407699 Copied

Elhadj07

Participant

July 30, 2024 at 05:04

For the Shopping cart icon I would like to display this same one if possible please.

Thanks

#407700 Copied

Elhadj07

Participant

July 30, 2024 at 05:04

For the Shopping cart icon I would like to display this same one if possible please.

Thanks

Files is visible for topic creator and
support staff only.

#407701 Copied
Luca Rossi

Support staff

July 30, 2024 at 05:13
Hi @Elhadj07,

Please try adding the following CSS codes:
```
body .etheme-product-hover-mask3 footer {
    top: -15px !important;
    bottom: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}
body .etheme-product-grid-item .footer-inner {
    justify-content: space-between;
    padding: 0 15px;
}
```
Here is the result: https://prnt.sc/Vo90AxADUp3O

Hope it helps!
#407702 Copied
Elhadj07

Participant

July 30, 2024 at 06:04

Hi Luca,

I would like the background in round or circular shape for these and in white instead of black then icons in black.

Where can I change these from please?

Thanks very much!

#407707 Copied
Luca Rossi

Support staff

July 30, 2024 at 06:37
Hi @Elhadj07,

In this case, please add this custom CSS:
```
body .etheme-product-grid-item .footer-inner a {
    background-color: transparent !important;
}
body .etheme-product-grid-item .footer-inner span.et-icon {
    color: #000;
}
body .etheme-product-grid-item .footer-inner a svg {
    fill: #000;
}
```
https://prnt.sc/3GraIfQ3L6lU

Best Regards,
The 8Theme Team.
#407716 Copied
Elhadj07

Participant

July 30, 2024 at 09:04

Hi Luca,

I think there is a little misunderstanding, I wanted to display the shopping bag and wishlist icon on all listings.

*Trending Now section on home page is perfect.

I would like same for Shop Page, You May Like & People Also Bought.

On Best Sellers section: I would like to replace the Shopping cart to the same shopping bag used on Trending Now.

I have included screenshots and wrote on them for your reference.

Also on mobile I would like the same display on home page, Shop Page and You May Like and People Also Bought just like it is on the Trending Now Section on desktop.

Thanks very much!

Files is visible for topic creator and
support staff only.

#407763 Copied

Elhadj07

Participant

July 30, 2024 at 09:07

Additional screenshots for your reference.

Files is visible for topic creator and
support staff only.

#407765 Copied
Luca Rossi

Support staff

July 30, 2024 at 13:08
Hi @Elhadj07,

Do you hide the add to cart button on the shop page? They’re disappeared now. Please share us with your WP Admin account so we can check.

Please also add this custom CSS for the single product page:
```
body.archive .etheme-product-grid-item .footer-inner {
    justify-content: end;
}

.product-view-default .xstore-wishlist {
    opacity: 1;
}
```
Hope it helps!
#407842 Copied
Elhadj07

Participant

July 30, 2024 at 13:56

Hi Luca,

Yes I hide the add to cart button from the shop page.

I added the new code but can’t see the changes I mentioned that I would like help with.

Also on my mobile still no change.

I have included my logins here.

Thanks very much!

Please contact administrator
for this information.

#407865 Copied

Elhadj07

Participant

July 30, 2024 at 14:22

Hi Luca,

Here is what I mentioned earlier just for better clarification.

***Trending Now section on home page is perfect.

1- I would like same for Shop Page, You May Like & People Also Bought ( display shopping bag left side and wishlist icon right just as is on Trending Now section on the home page ).

2 – On Best Sellers section ( Home page ) : I would like to replace the Shopping cart icon to the same shopping bag used on Trending Now.

I have included screenshots and wrote on them for your reference.

3 – Also on mobile I would like the same display on home page, Shop Page and You May Like and People Also Bought just like it is on the Trending Now Section on desktop.

Thanks very much!

Please contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#407878 Copied

Elhadj07

Participant

July 31, 2024 at 01:32

Hi Luca,

I think one of the code is causing an issue on the product page.

The sale icon background is now red but it was white.

Thanks very much!

Files is visible for topic creator and
support staff only.

#407967 Copied

Luca Rossi

Support staff

July 31, 2024 at 09:44

Dear @Elhadj07,

We hope this message finds you well. We would like to inform you that the layout of products on the archive pages and single product page differs from the product carousel element on your homepage. To relocate the “Add to Cart” button to the top left of the product images would require extensive customization, which unfortunately falls outside the scope of our standard support services.

Should you require personalized customization, we kindly invite you to submit a request through our customization panel at the following link: [8Theme Customization Panel](https://www.8theme.com/account/#etheme_customization_panel). This will enable direct engagement with our technical team who are equipped to assist you further. Please be aware that customization services will incur additional charges, the details of which will be provided after a thorough review of your request.

Additionally, we are pleased to inform you that we have made the wishlist icon permanently visible on the shop and single product pages for your convenience. You can view the updates here:
– [Wishlist Icon on Shop Page](https://prnt.sc/ZUnMfx8akeI2)
– [Wishlist Icon on Single Product Page](https://prnt.sc/PFYQMNN5G4Xg)

We have also updated the sale icon background to a white color, which can be viewed here: [Updated Sale Icon](https://prnt.sc/-VsUS9LL9jn_).

Thank you for your understanding and cooperation. Should you have any further questions or require additional assistance, please do not hesitate to contact us.

Best Regards,
The 8Theme Team

#408040 Copied

Elhadj07

Participant

July 31, 2024 at 12:39

Hi Luca,

Thanks very much! And for the add to cart icon for shop page listing image. I will do that later then and will contact your customization team for that.

So far I’m very satisfied will all the support you have been providing.

I have the following additional questions for you:

1 – At Trending Now section on home page. How can I change the bag icon to the cart icon like on the best sellers section because on the main header I am using the cart icon as well so, I would to change the bag icon to the cart icon on Trending Now.

2 – On the “People Also Bought and You May Like” Section how can I change the border radius of the images to 5px I can’t find the option for that.

3 – On the Shopping cart and checkout pages how to change the ( payment secure… text )?

I have included screenshots images for your reference.

Thanks very much!

Files is visible for topic creator and
support staff only.

#408082 Copied
Luca Rossi

Support staff

August 1, 2024 at 07:37
Hi @Elhadj07,

1. We’ve updated the cart icon for you: https://prnt.sc/PrmFZFL0Lfye. We’ve also enabled the add to cart icon on your shop page. Sorry the confusion in the previous reply: https://prnt.sc/xGXR0oVdDGW4.

2. Please add this custom CSS code:
```
body .content-product .product-content-image {
     border-radius: 5px;
     overflow: hidden;
}
```
Hope it helps!

Please contact administrator
for this information.
#408225 Copied
Andrew Mitchell

Support staff

August 1, 2024 at 12:54

Dear Elhadj07,

Choosing our theme reflects your commitment to quality, and for that, we’re genuinely grateful. As we constantly strive to elevate your experience, your feedback is an invaluable gift. Could you kindly take a moment to rate our product with 5 stars on ThemeForest?

Click here to share your insights: https://themeforest.net/downloads

Your support fuels our journey, and we appreciate it more than words can express.

Best Regards,
The 8Theme Team

#408293 Copied
Tagged: e-commerce design, listing customization, remove borders, user interface, website improvement, woocommerce, wordpress templates
Viewing 26 results - 1 through 26 (of 26 total)

The issue related to '‘I would like to Remove borders on the listings’' has been successfully resolved, and the topic is now closed for further responses

I would like to Remove borders on the listings

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection