Return to previous page

Product page buy now + add to cart button

This topic has 16 replies, 2 voices, and was last updated 1 years, 8 months ago ago by Rose Tyler

abanoubmourad

Participant

April 24, 2023 at 15:10

hai please check my product page from mobile phone first
https://onegulfstore.com/product/yellow-diamond-ring
1- you will find add to cart button + buy now button on sticky mode had a poor design and i want to solve this
2- product image frame is too big i want to make it more smaller to pull up important elements up

#354367 Copied Theme version: 9.1.2

15 Answers

Rose Tyler

Support staff

April 24, 2023 at 15:37

Hello, Abanoubmourad,

Thank you for getting in touch with us.

Please provide screenshots from your mobile and describe the desired result in more detail.

Thank you for your cooperation and we look forward to hearing from you soon.

Kind Regards,
8theme team

#354370 Copied

abanoubmourad

Participant

April 24, 2023 at 15:46

1- https://ibb.co/Jsdw3Nb
you will find add to cart button + buy now button on sticky mode had a poor design and i want to solve this
2- https://ibb.co/dG09dvQ
product image square is too big i want to make it more smaller to pull up important elements up

#354376 Copied
Rose Tyler

Support staff

April 24, 2023 at 16:07
Hello, Abanoubmourad,

Thank you for your response.

1/ Please add the next code in Theme options > Theme custom CSS > Global:
```
@media (max-width: 767px) {
    .etheme-sticky-cart p.price,
    .etheme-sticky-cart .quantity ~ .et-single-buy-now {
        display: none;
    }
}
```
2/ There is no such option, but you can try the next custom CSS code:
```
@media only screen and (max-width: 992px) {
    .single-product .et_product-block.mob-full-width:nth-child(1), .single-product .et_product-block.mob-full-width:nth-child(2) {
        width: 50% !important;
    }
}
```
Kind Regards,
8theme team
#354377 Copied
abanoubmourad

Participant

April 24, 2023 at 16:29

1- now buy now button disappear and i don’t want this i want 2 buttons + price
2- not working page design damaged

#354378 Copied

abanoubmourad

Participant

April 24, 2023 at 16:35

3- and i added promo text on top header and make top header sticky on mobile and desktop but it’s still not sticky main header only sticky

#354379 Copied

abanoubmourad

Participant

April 24, 2023 at 23:35

4- single product image quality low but when i hover on it quality increased , i want to solve this and make it always high quality

#354404 Copied
Rose Tyler

Support staff

April 25, 2023 at 13:31
Hello, Abanoubmourad,

Thank you for your response.

1/ Please remove the previous code and use:
```
@media only screen and (max-width: 992px) {
    .single-product .etheme-sticky-cart .et_column:nth-child(2) {
        justify-content: flex-start;
        overflow: auto;
    }
}
```
2/ You can add next custom CSS to decrease the height of images on mobile:
```
@media only screen and (max-width: 768px) {
    .swipers-couple-wrapper .swiper-wrapper img {
        max-height: 300px;
        width: auto;
    }
    .swiper-control-bottom .swiper-wrapper img {
        max-height: 100px;
    }
}
```
Result – https://prnt.sc/dcsjFz8S76-R

3/ You are using now our XStore Advanced sticky header plugin where is only possibility to make one header part sticky but with full own design. To have a few sticky headers, please disable XStore Advanced sticky header plugin and configure Header sticky settings.

4/ To increase the quality of your images on Single product, please, set higher values in Theme Options → WooCommerce → Product Images → https://prnt.sc/kIJFwfEYOPAp . More information you may find here → https://woocommerce.com/document/image-sizes-theme-developers/#section-1

We hope this information is helpful.

Kind Regards,
8theme team
#354474 Copied
abanoubmourad

Participant

April 25, 2023 at 14:03

1- code not working still add to cart buuton only appear
2- working fine
3- working but there is white space on sticky for top header https://prnt.sc/O2qhUlsxv2RK
4- i don’t know what is value i have to put please tell me exactly

#354478 Copied
Rose Tyler

Support staff

April 25, 2023 at 15:40
Hello, Abanoubmourad,

Thank you for your response.

1/ The code works fine, there is no other way to show both buttons – https://gyazo.com/9abeab88a3a9ae816d5a5d1763436b35

3/ You can change the background color of the top header or use the next custom CSS code:
```
.header-top .et-container {
    padding: 0px;
}
```
4/ 670
After these changes, you need to Regenerate Thumbnails to apply them for iamges! You can use the Regenerate thumbnails plugin to do this https://wordpress.org/plugins/regenerate-thumbnails/

Kind Regards,
8theme team
#354487 Copied
abanoubmourad

Participant

April 25, 2023 at 17:18

1- okay show only add to cart + quantits + price and remove buy now button from sticky , tell me how to do this
3- works fine
4- not working image still blury and quality increased when i hover on it only
5- sale persantage badge working fine on shop page but on single product page no , not showing sale persantage like shop page only show text
6- i want to translate this texts :
– BUY 2 ITEMS GET 20% OFF on each product
– estimate delivery date ” days ”
– BUY NOW

#354492 Copied
Rose Tyler

Support staff

April 26, 2023 at 10:17
Hello, Abanoubmourad,

Thank you for your response.

1/ In this case, delete this code https://prnt.sc/sFGixoOOFgcE and use this one:
```
@media (max-width: 767px) {
    .etheme-sticky-cart .quantity ~ .et-single-buy-now {
        display: none;
    }
}
```
4/ Zoom on hover shows the image in real size it was uploaded on the site, but the real width of the image is only 675px. Try to upload the image in biggest dimension and check then.
5, 6/ Please post new questions via new topics https://www.8theme.com/forums/xstore-wordpress-support-forum/ to prevent a mess in this conversation.

We hope for your understanding.

Kind Regards,
8theme team
#354552 Copied
abanoubmourad

Participant

April 26, 2023 at 12:17

1- solved
4- what you mean biggest dimension

#354578 Copied

Rose Tyler

Support staff

April 26, 2023 at 12:44

Hello, Abanoubmourad,

Thank you for your response.

We mean that the images of your products should have a larger width and height. In case you think that they are blurry on our demo – https://xstore.8theme.com/elementor2/luxury-jewelry/product/yellow-diamond-ring/

Kind Regards,
8theme team

#354581 Copied

abanoubmourad

Participant

April 26, 2023 at 14:05

images blury in your demo too
what this mean

#354595 Copied

Rose Tyler

Support staff

April 26, 2023 at 15:46

Hello, Abanoubmourad,

Have you had the opportunity to review the demonstration prior to making your purchase? For us images do not look blurry, we already described to you how to fix it by uploading your own images – https://www.8theme.com/documentation/xstore/woocommerce/product-images/ https://docs.woocommerce.com/document/fixing-blurry-product-images/ These settings come from Woocommerce, not from our theme.
We hope for your understanding.

Kind Regards,
8theme team

#354610 Copied
Tagged: add to cart, buy now, online shopping, secure payment, woocommerce, wordpress templates
Viewing 16 results - 1 through 16 (of 16 total)