Return to previous page

I have problems with my shop, product, instruction manual and home page.

This topic has 20 replies, 3 voices, and was last updated 2 years, 8 months ago ago by Dany

Dany

Participant

March 8, 2022 at 21:12

Hi, I would need your help with some of my pages.
Firstly, I’d want to set a margin or a padding to the left and top side of my shop page, as some elements are too close.
Also, can you help me to set my product’s images with a 20px border radius?
In addition, regarding my product, I can’t see the sale label properly on the product image, it’s a little bit off. Is there a way to change its position?
Then, can I set the image zoom to a little bit lower?
Finally, can I set a border radius on the first slider on the instruction manual page? And in the fifth section of the homepage, could you set the banner zoom animation not to let the image off the banner’s borders?
Sorry for bothering, thank you in advance.

Please, contact administrator
for this information.

#319209 Copied Theme version: 8.1.1 WooCommerce version: 6.2.1

19 Answers

Rose Tyler

Support staff

March 9, 2022 at 11:43

Hello,

1/ ‘Firstly, I’d want to set a margin or a padding to the left and top side of my shop page, as some elements are too close.’ –
Please, go to Theme Options -> Theme Custom CSS -> Global CSS and next custom css:
.archive.woocommerce .content-page {
margin-top: 50px;
}
2/
‘Also, can you help me to set my product’s images with a 20px border radius’ –
Please, go to Theme Options -> Theme Custom CSS -> Global CSS and next custom css:
.content-product .product-content-image {
border: 20px solid #888;
}
https://gyazo.com/02d7643b406115be3eb10ad6b0b96047
3/
‘Is there a way to change its position’ –
Please, go to Theme Options -> Theme Custom CSS -> Global CSS and next custom css:
.woocommerce-product-gallery__image img {
width: 100%;
}
https://gyazo.com/55f98280a51c5bf1e85accb4701ee5e0
4/ ‘Then, can I set the image zoom to a little bit lower?’ –
If you mean on single product page then it is not possible because it is calculated by script of zoom.js
5/ ‘Finally, can I set a border radius on the first slider on the instruction manual page?’ –
Please, go to Theme Options -> Theme Custom CSS -> Global CSS and next custom css:
.page-id-6713 .elementor-widget-etheme_slider {
border-radius: 50px;
overflow: hidden;
}
6/ ‘And in the fifth section of the homepage, could you set the banner zoom animation not to let the image off the banner’s borders?’ –
Please, go to Theme Options -> Theme Custom CSS -> Global CSS and next custom css:
.et_image-hover-2.active img, .et_image-hover-2:hover img, .et_image-hover-4:not(:hover):not(.active) img {
transform: scale(1.07);
}

Also we highly recommend you to provide admin access if you have such questions of customization changes. And please, make your questions numerical.

Regards

#319253 Copied

Dany

Participant

March 18, 2022 at 21:59

Thank you very much, I’ll have to bother you again:
1) The currency notice on the shop page (at the very bottom) doesn’t have the same colours as the one on the other pages… Maybe it’s a WooCommerce issue, could you resolve this?
2) The sale label on the shop page doesn’t look like the one on the product page, with a 20px border radius.
3) I can’t set my product images on the product page with a border radius (20 px).
4) How do I set my “Sticky add to cart bar” to not cover the elements at the bottom of the product page when I scroll down?
5) Also, in this sticky bar I’d like the “Buy now” button to have a 1px white border.
6) Can I change the colors of the “Back to the top” button on the bottom right?
7) Can I change the colors of the input forms on the checkout and cart page?
8) How do I set a top margin on the account page to better see the elements that are attached to the header?
Thanks in advance.

Please contact administrator
for this information.

#319991 Copied
Rose Tyler

Support staff

March 19, 2022 at 09:29
Hello,

1/ Could you provide screenshots, for a better understanding of problem?
2/ Theme Options > WooCommerce > Shop elements > Sale > Sale Label Size, or provide temporary wp-admin access, so we can take a closer look.
3/ Try to use this custom CSS code –
```
.single-product .woocommerce-product-gallery__image {
    border-radius: 20px;
}
```
4/ Submit this question as a separate topic – https://www.8theme.com/forums/xstore-wordpress-support-forum/ , provide temporary wp-admin and FTP access. One of our technicians will check it more deeply after the weekend.
5/
```
.etheme-sticky-panel .et-single-buy-now.single_add_to_cart_button.button {
    border: 1px solid white !important; 
}
```
6/
```
.back-top {
    background-color: #a50852;
    color: #fff;
}
.back-top svg path {
    stroke: #101010;
}
```
7/ Theme Options > Styling > Inputs Background Color
8/
```
.woocommerce-account .content-page {
    margin-top: 60px;
}
```
Regards
#320008 Copied
Dany

Participant

March 19, 2022 at 16:38

1) See in the private content area. The problem also happens in the account, checkout and cart page.
Thanks!
—————-
2) How do I remove the Pre Footer newsletter widget in the account and newletter page? Also, can I remove it when a customer is subscribed?
3) Can I change the hover color of the buttons on the promo text (in the top header)?
4) Can you help me in making the mobile “Sticky add to cart bar” a slider in which you can see all the elements that you can see on PC?
5) Regarding the previous problem 7), how about the border radius and the hover colors, how can I change those?
6) How can I change the “Added/removed in/from the cart” message background color?
7) How can I remove the “Spend — to get free shipping” label on the mobile cart side panel and set its product image with a 20px border radius?
8) Also in the cart and in the sticky add to cart bar, can I set a border radius of the images (20px)?
9) Can I change the button hover border color on the empty cart page? Also, in this I’d like to return the customer to the “HOMEPAGE”, not to the “SHOP”.
10) Can I set a color to the “ADD” button on this page (in the private area)?
11) Can I set a border radius to the botton on this page (in the private area)?
12) How can I see the product image centered and with the previously set border radius on mobile? There are some problems in those.
13) How can I set a border radius to the botton and the input box on the newsletter page?
14) Is there a way to show a logo next to each of the customer’s name on the product page reviews?
15) In the product page, when going up from the tabs to the top of the page, the product image remains below the sticky header. How can I change that?
16) Can I set a black shadow below the product images on the product page?
17) Can I change the buttons’ borders’ hover colors on this page (in the private content are)?
18) Can I change the colors of the buttons on these pages (in the private content area)?
19) Can I customize the 404 page? Also, how can I cancel the page that I indicated in the private area?
Sorry for the quantity of questions, I was just checking all the site…

Please contact administrator
for this information.

#320026 Copied
Olga Barlow

Support staff

March 21, 2022 at 16:49
Hello,

1) Add the below code to custom CSS
```
.woocommerce-store-notice.demo_store a {
    color: #1dbaef    ;
}
.woocommerce-store-notice.demo_store a:hover {
    color: #d912c2    ;
}
```
2) Go to Pages > edit page where you want to remove that > 8theme Layout options > Use custom pre-footer for this page/post > choose Without.
There is no option to disable it for the subscribed customers. Only by additional customization.
3) Add the below custom
```
.et-promo-text-carousel a:hover {
    color: #ec10d2;
    opacity: 1;
}
```
4) It requires additional customization. You can submit customization request here.
5)
```
.single_add_to_cart_button.button:hover {
    background-color: #ffffff;
    border-color: #1dbaef;
    color: #eb12d2;
}
```
If you don’t have CSS skills you can use Yellow pencil plugin (XStore > Plugin Installation).
6) Are you talking about this notice https://gyazo.com/e29fa0401c84a49fdba40434f99e1a7c
Add the following code
.et-notify[data-type=success] {
background: #eb10d2;
}
7) Go to XStore > Sale booster > Progress Bar > disable option. Do you want to add border-radius here https://www.awesomescreenshot.com/image/24410368?key=45f32fee38b2b58f87164c30d0141b49 ?
```
.cart-widget-products .product-mini-image img {
    border-radius: 20px;
}
```
8) Use
```
.etheme-sticky-cart .wp-post-image {
    border-radius: 20px;
}
```
9) Use
```
.empty-cart-block .btn:hover, .empty-category-block .btn:hover {
    border-color: #eb10d2 !important;
}
```
We don’t have the option to change the link.
10),11) Provide us with WP Dashboard access to check these pages. Or use Yellow pencil plugin to change styles.
12) Are you talking about border-radius for the product image everywhere?
13) Provide link to the page that you are talking about and also a screenshot of the result that you plan to achieve. Because I’m not sure that understand what you want to implement.
14) You use third-party plugin for the reviews. So, contact plugin author with this question.
16) The black shadow on the black background? Are you talking about main image of the product on the single product page.
17), 18) You can edit the buttons bg and border colors in Theme Options > Styling. Or use Yellow pencil plugin to customize styles. Or create list of all the customization you need and submit customization request to customization team.
19) If you want to place custom content go to Theme Options > 404 page > add HTML content you want to show there. There is no special option to remove that. Only by additional customization.

Regards
#320159 Copied
Dany

Participant

March 22, 2022 at 22:51

1) I’m sorry but code at number 3 doesn’t work…
2) I’ve provided access for number 10 and 11
3) For problem 12) I mean that I can’t see the product images properly centered with the 20px border radius on mobile
4) For number 13) I meant this page: see private area
5) For 16), I’m talking about all the images on the product page.

Please contact administrator
for this information.

#320266 Copied
Olga Barlow

Support staff

March 23, 2022 at 13:01
Hello,

3),12) Provide us with auth credentials. We can’t check your Dashboard without that.
16) Add the below custom code
```
.single-product .product img {
    -webkit-box-shadow: 0px 0px 15px 2px #9240b3 !important;
    box-shadow: 0px 0px 15px 4px #9240b3 !important;
}
```
Regards
#320330 Copied
Dany

Participant

March 25, 2022 at 21:40

I’m sorry, here it is.

For 16), I can’t see the product images’ shadows. Only in the comment section.

Please check all the other questions…

Please contact administrator
for this information.

#320584 Copied
Olga Barlow

Support staff

March 28, 2022 at 09:52
Hello,

I changed code to following
```
.single-product .product .woocommerce-product-gallery img {
		margin: 15px;
		-webkit-box-shadow: 0px 0px 15px 2px #9240b3 !important;
    box-shadow: 0px 0px 15px 4px #9240b3 !important;
}
.single-product .product .woocommerce-product-gallery.swipers-couple-wrapper .swiper-wrapper img {
    width: calc(100% - 30px);
}
```
Check now. Does that suit your needs?

Regards
#320706 Copied
Olga Barlow

Support staff

March 28, 2022 at 09:55

P.S. and let me know what issues do you still need help with, please. Because you asked a lot of questions and I’m confused which were closed and which still require our attention.

Regards

#320707 Copied

Dany

Participant

March 28, 2022 at 20:29

I will list the remaining issues here:
1) I have a problem in changing the hover color of the buttons on the promo text (in the top header).
2) I can’t see the product image centered and with a 20px border radius on mobile.

Please contact administrator
for this information.

#320762 Copied
Olga Barlow

Support staff

March 29, 2022 at 14:31
Hello,

1) I added code that I suggested above
```
.et-promo-text-carousel a:hover {
    color: #ec10d2;
    opacity: 1;
}
```
And it works ok
https://gyazo.com/178609c17a2d98133e557b8960849c1c
So, I don’t understand the issue.

2) Check now, please.

Regards
#320801 Copied
Dany

Participant

March 29, 2022 at 21:00

Still not centered, sorry, could you please provide some code?

#320822 Copied
Olga Barlow

Support staff

March 30, 2022 at 11:54
Hello,

I see that you removed my custom code. So, add the below code to Theme Options > Custom
```
.woocommerce-product-gallery.images-wrapper {
    width: calc(100% - 40px) !important;
}
```
Regards
#320879 Copied
Dany

Participant

March 30, 2022 at 19:16

Thank you… but the bottom product images are a little cut out. I can’t find a way to resolve this, could you please help me?
Also, is there a way to change the hover color of the X button on the mobile menu?

#320944 Copied
Olga Barlow

Support staff

March 31, 2022 at 11:37
Hello,

Add below code to custom CSS
```
.swipers-couple-wrapper.woocommerce-product-gallery .swiper-wrapper img {
    padding: 5px;
}
```
Regards
#321004 Copied
Dany

Participant

April 5, 2022 at 20:55

Thank you so much.
Lastly, could you please help me in centering the product images on mobile devices (tablet/phone)?

#321409 Copied
Olga Barlow

Support staff

April 6, 2022 at 16:39
Hello,

I have already written you about this. Add the below code to Theme Options > Custom
```
.woocommerce-product-gallery.images-wrapper {
    width: calc(100% - 40px) !important;
}
```
Regards
#321457 Copied
Dany

Participant

April 6, 2022 at 19:49

Thank you sm!

#321462 Copied
Tagged: home page, instruction manual, product, shop, themes, woocommerce, wordpress
Viewing 20 results - 1 through 20 (of 20 total)

The issue related to '‘I have problems with my shop, product, instruction manual and home page.’' has been successfully resolved, and the topic is now closed for further responses

I have problems with my shop, product, instruction manual and home page.

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection