Home › Forums › WoodMart support forum › 2 Simple Questions: Custom Location for Variables & Limit Breadcum

2 Simple Questions: Custom Location for Variables & Limit Breadcum

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • January 8, 2024 at 12:37 pm #527804

    smart.sharukhkhan786
    Participant

    Hi,

    I just have two simple questions.

    1st: Regarding variable products, the “Add to Cart” button remains stuck in its default location. I would like to customize its placement, as I have implemented a sticky “Add to Cart” button for mobile devices and hidden the original button. This customization works seamlessly for single products, but when visiting a variable product, the “Add to Cart” button is replaced with a selection option. How can I display product variations for mobile devices below the image gallery?

    2nd: For breadcrumbs, there should be a character limit. Currently, if the product name is extensive, it spans 2-3 lines in the breadcrumb trail, displaying the complete name. I aim to restrict it to a single line. If the limit is exceeded, it should display: Home / Shop / Magnifying Glasses / Antique Brass Ks…….

    Attachments:
    You must be logged in to view attached files.
    January 9, 2024 at 10:49 am #528167

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    01. Sorry to say there are no options in theme settings to show variation in sticky add to cart. Try to change the position of the add to cart button by using the page builder with the help of custom layout feature.

    02. WoodMart does not have the option to modify the breadcrumbs, unfortunately. There are two kinds of breadcrumbs in our theme: one comes from the WooCommerce plugin and one from WoodMart. If you want to customize one of our theme’s one, you need to edit the file: inc/template-tags.php.
    https://woo.com/document/customise-the-woocommerce-breadcrumb/

    Best Regards.

    January 9, 2024 at 11:42 am #528188

    smart.sharukhkhan786
    Participant

    Hi, I believe my initial question might not have been clear.

    I specifically want to display product variations below the image gallery for mobile devices. I’m not utilizing the standard add to cart button in the mobile layout; instead, I’m using a sticky add to cart feature only for mobile “Hidden for desktop using CSS codes”. Is there a way to showcase product variables in a custom location using function codes or any other method?

    January 9, 2024 at 3:03 pm #528269

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    When you disable the add to cart function it will remove the product variation as well. I think you have removed the add to cart widget in the layout for mobile devices that is why the product variation is not showing in mobile.

    Please use the custom css to hide the add to cart button in mobile device. Add the following Custom CSS code to Theme Settings > Custom CSS > CSS for mobile

    .single_add_to_cart_button {
	display: none;
}

    Best Regards.

    January 9, 2024 at 4:40 pm #528336

    smart.sharukhkhan786
    Participant

    I still can see Buy Now and quantity buttons.

    Attachments:
    You must be logged in to view attached files.
    January 9, 2024 at 5:54 pm #528377

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Can you please share the wp logins details i will check and give you a possible solution.

    Best Regards.

    January 9, 2024 at 6:19 pm #528400

    smart.sharukhkhan786
    Participant

    Hi, please use these details.

    January 10, 2024 at 10:49 am #528556

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Sorry for the early confusion!

    Sorry it is not possible to hide the add to cart button and keep the sticky add to cart. Because when you hide the add to cart button and for variable products when you click on the select options button and choose the variation and then you need to click on the add to cart button.

    Best Regards.

    January 11, 2024 at 1:42 pm #529022

    smart.sharukhkhan786
    Participant

    Hi, I want to remove hover effect for next and previus image gallery button. Also I want to change the size from 50px to 40px, I tried css in inspect mode and attached a screenshot.

    Attachments:
    You must be logged in to view attached files.
    January 11, 2024 at 5:42 pm #529077

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS area:

    .wd-nav-arrows.wd-hover-1.wd-pos-sep .wd-next,  .wd-nav-arrows.wd-hover-1.wd-pos-sep .wd-prev {
transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}

    Best Regards.

    January 11, 2024 at 7:01 pm #529117

    smart.sharukhkhan786
    Participant

    Thank you so much. I also want to change the arrow size with background from 50px to 40px

    January 11, 2024 at 7:12 pm #529119

    smart.sharukhkhan786
    Participant

    I think these are the values

    width: var(–wd-arrow-width, var(–wd-arrow-size, 50px)); —- I want to make it 40px
    height: var(–wd-arrow-height, var(–wd-arrow-size, 50px)); —- I want to make it 40px

    January 12, 2024 at 10:27 am #529200

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Attempt to incorporate the “width” and “height” properties into the previous code and change the “width” and “height” value.

    Best Regards.

    January 12, 2024 at 11:27 am #529240

    smart.sharukhkhan786
    Participant

    Can you please send me the codes, Because I tried and it’s not working.

    January 12, 2024 at 3:36 pm #529353

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS area:

    div.wd-arrow-inner {
	width: 30px !important;
	height: 30px !important;
}

    Change the value as per your requirements.

    Best Regards.

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)