Return to previous page

Optimize Sticky Buy Now for Mobile Screens

This topic has 4 replies, 2 voices, and was last updated 1 years ago ago by Tony Rodriguez

thedeancorp

Participant

November 9, 2023 at 07:20

Hello, are there any options to adjust the sticky buy now on mobile? As far as I can tell, I don’t believe the sticky adjusts at all (unless I am missing a setting). And because of that, there is content outside of the frame on mobile; the quantity selector to the left, the wishlist and compare to the right.

Please, contact administrator
for this information.

#373105 Copied Theme version: 9.2.3 WooCommerce version: 8.2.2

3 Answers
Tony Rodriguez

Support staff

November 9, 2023 at 08:32
Hello, @thedeancorp,

Thank you so much for purchasing our theme and contacting our support center.

We understand that you are interested in modifying the sticky cart feature on mobile devices to display the quantity, add to cart, and buy now buttons. To achieve this, please follow the steps outlined below:

1. Navigate to the “XStore” section in your website’s dashboard.
2. Click on “Theme Options.”
3. Proceed to “Theme Custom CSS.”
4. Select the “Mobile CSS” tab.
5. Copy and paste the CSS code provided below into the designated area.
6. Click “Publish” to apply the changes.
```
.etheme-sticky-cart .single_add_to_cart_button.button {
    min-width: 120px !important;
}
```
Should you require further customization or if the provided solution does not meet your needs, we kindly ask you to provide us with a more detailed description of your request. This will enable us to understand your requirements better and offer the appropriate assistance.

Furthermore, we would appreciate it if you could create temporary wp-admin access and share the details via the private content area. This will allow us to review your settings and better understand the issue at hand.

Thank you for choosing 8Theme. We are committed to ensuring your satisfaction and are here to help.

Best Regards,
The 8Theme Team

Please contact administrator
for this information.
#373117 Copied
thedeancorp

Participant

November 10, 2023 at 09:38

Thankyou. Yes, I can make the adjustments via css. I just wanted to make sure I wasn’t missing a setting first.

Basically on a phone, if you have both the Buy Now & Add to Cart option turned on, there are too many things in the sticker buy now and most are out of frame. Default includes picture, quantity, add to cart, buy now, wishlist icon and compare icon. On a phone, I was only seeing the Add to cart, buy now and half the wishlist button.

While my css skills are very beginner, this worked for me and may be helpful if anyone else has the issue. It removes/hides everything but the quantity, add to cart and buy now button.

/* X-Store Sticky Mobile Buy Now */
@media (max-width: 768px) {
.et_column.et_col-xs-5.flex-inline.align-items-center.mob-hide {
visibility: hidden;
padding: 0px;
margin: 0px;
height: 0px;
width: 0px;}
}
@media (max-width: 768px) {
.pos-static.et_column.et_col-xs-7.flex-inline.align-items-center.justify-content-end.mob-full-width.mob-justify-content-center {
width: 100%;}
}
@media (max-width: 768px) {
.pos-static.et_column.et_col-xs-7.flex-inline.align-items-center.justify-content-end.mob-full-width.mob-justify-content-center > .single-wishlist, .pos-static.et_column.et_col-xs-7.flex-inline.align-items-center.justify-content-end.mob-full-width.mob-justify-content-center > .single-compare {
visibility: hidden;
width: 0px;
margin: 0px;
padding: 0px;
height: 0px;}
}
@media (max-width: 768px) {
.pos-static.et_column.et_col-xs-7.flex-inline.align-items-center.justify-content-end.mob-full-width.mob-justify-content-center > .justify-content-end {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;}
}
@media (max-width: 768px) {
.etheme-sticky-cart .single_add_to_cart_button.button {
min-width: 120px !important;}
}

#373269 Copied

Tony Rodriguez

Support staff

November 10, 2023 at 10:04

Hello. @thedeancorp,

You are welcome.

We’re pleased to learn that your problem has been resolved. If you have any additional questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

Have a nice day.

This topic is now closed.

Kind regards,
The 8Theme Team

#373276 Copied
Tagged: boost mobile sales woocommerce, efficient sticky buy now optimization, enhance woocommerce mobile view, improve mobile woocommerce experience, mobile-friendly woocommerce themes, optimize woocommerce sticky buy now, wordpress woocommerce mobile optimization
Viewing 4 results - 1 through 4 (of 4 total)