Arrows on Single Product Page (Carousel Navigation) Desktop and Mobil

[postbox-007]

I have adapted the arrows on the Single Product page for my store.

With the following code, this is perfect for me in the desktop view. However, it doesn’t look nice on mobile devices.

.single-product  .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next {
    background-color: #3c434a;
    color: #fff;
}

How can I adapt this for mobile views?

Thank you very much.

• This topic was modified 1 year ago by postbox-007. Reason: additional info
• This topic was modified 1 year ago by postbox-007.

Attachments:

You must be logged in to view attached files.

To make it even better: Is it possible to place the navigation (i.e. the arrows and the dots) below the single image?

Hello,

Use this custom css code for desktop only from Theme Settings > Custom CSS > Custom CSS For desktop.

Also share the page url i will give you a custom css code for mobile device.

Best Regards.

Is it also possible to place the navigation (arrows and dots) below the single image?

Page is in Maintenence Mode:

Hello,

Can you please share the screenshot where you want to add the arrows and dots.

Best Regards.

Like this. Below Single Product Image

Like this. Below the Single Product Image

Attachments:

You must be logged in to view attached files.

Hello,

You can try to use the below code, paste it into the “Global Custom CSS” area in Theme Settings -> Custom CSS.

.woocommerce-product-gallery .owl-dots {
   position: relative;
   bottom: 15px;
   }

Best Regards.

NIce. Thank you. The Dots are now below.

Is it also possible to move the arrows for the mobile view downwards as well?

And what I also just saw is that the “Enlarge” icon has also moved down. That’s not so nice visually.

I would like to:

– have the zoom on the image as it is in the default
– Arrows: Desktop on the image and Mobile below the image
– Dots: Desktop and mobile below the image

Is this possible?

Attachments:

You must be logged in to view attached files.

Hello,

Please give me the full site access as administration, So I will check and give you a possible solution.

Best Regards.

See here:

Hello,

Add this code in the Global custom CSS area:

.wd-action-btn.wd-style-icon-bg-text>a {
    position: relative !important;
    bottom: 90px !important;
    left: 40px !important;
}

Go to Theme Settings > Custom CSS > Add this code in Mobile CSS:

.woocommerce-product-gallery__wrapper .wd-btn-arrow {
    margin-top: 105px !important;
}

Best Regards.

I insert the code. But it looks weird … 😉

Look at site

Hello,

Now check back your site after completely clearing the browser cache.

Best Regards.

Hello.

Since the new major update, the CSS Code doesnt work anymore. Can you update the CSS-Codes please? Thank you very much.

DESKTOP:

/* SHOP: Single Product: Pfeile im Carousel */
.single-product  .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next {
    background-color: #3c434a;
    color: #fff;
}
/* SHOP: Navigation (Dots) unter dem Prdouktbild*/
.woocommerce-product-gallery .owl-dots {
   position: relative !important;
   bottom: 0px !important;
   }
.wd-action-btn.wd-style-icon-bg-text>a {
    position: relative !important;
    bottom: 50px !important;
}

MOBILE:

.woocommerce-product-gallery__wrapper .wd-btn-arrow {
    margin-top: 125px !important;
}
.woocommerce-product-gallery .owl-dots {
    position: relative !important;
    bottom: 0px !important;
}

.wd-action-btn.wd-style-icon-bg-text>a {
    bottom: 50px !important;
    position: relative !important;
}

Hello,

Can you please share the correct login details of your site. So I will further check on your site and give you a possible solution.

Best Regards.

I have created a new Chield Theme and removed the CSS codes mentioned above.

So everything runs on standard. The settings are still not displayed.

I currently have appointments and cannot set up a second account.

Hello,

Please share the login details of your site so I can debug the issue more deeply and let you know the possible solution.

Best Regards.

Hello.

Sorry for delay.

Access:

Hello,

You can try to use the below code, paste it into the “Global Custom CSS” area in Theme Settings -> Custom CSS.

.wd-nav-arrows.wd-pos-sep .wd-prev, .wd-nav-arrows.wd-pos-sep .wd-next {
    background-color: #3c434a !important;
    color: #fff important;
}

Also when you change the position of arrow and carousel dots. It will affect the product gallery dots and arrows as well.

Best Regards.

Thank you. This one helps! 🙂

Issue can be closed

Most Welcome!!!.

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts