Navigation Arrows in All Product Related Elements

Hi there, i hope you are doing well.

I would like to change the colour and style of the arrows only on product carsouel elements and ajax elements of products that use arrows.

I attached a screenshot of what I would like but basically it is a small background box to make the arrows stand out a bit more – the bix should be small and width should be small as well so that on mobile screens it is still easily viewable.

I tried searching the forum and I found some codes but they do not work that well for my site.

I attached a screenshot as an example.

Thanks team!

Attachments:

You must be logged in to view attached files.

Hello,

Sorry to say i have not seen an arrow on product grid or carousel widgets on the home page on your site. Please try to enable the pagination arrow on your site . So I will check and give you a possible solution.

Best Regards.

Hi there, thanks for the quick response. This is the page link – https://dev.gymstore.co.za/wp-admin/post.php?post=36167&action=elementor

Hello,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.wd-arrow-inner{
    background-color: black !important;
    border-radius: 30px !important;
}

Best Regards.

Hi there, thanks for this. Did you see my initial screenshot I shared? The arrow background can’t simply be round as it takes up too much space on mobile. Please refer to my preferred shape and size with he screenshot.

Please also note, when the background is black the background should be white and vice-versa. Same for the arrow inside the navigation arrows.

Thank you!

Attachments:

You must be logged in to view attached files.

Hello,

Please remove the previous code and add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS. Change the value as per your requirements.

.wd-arrow-inner{
    background-color: black !important;
    border-radius: 5px !important;
    height: 50px !important;
    width: 40px !important
}
.wd-arrow-inner:after {
    font-size: var(--wd-arrow-icon-size, 20px) !important;
}

Best Regards.

[Author]

Posts