Linked variation and Free shipping bar

Hello

When using the Linked variation – the field “Free shipping bar” is displayed between the Color (Linked variation) product attributes (in my case, the size)

How can I move it and display it after all the variations?

Attachments:

You must be logged in to view attached files.

Or better: Can I display the Shipping Bar before the variations but after the “Before “Add to cart button”” theme settings field

Hello,

As far as we have confirmed from the Test Site for the Linked Variations Product, the Free Shipping Bar is showing after the Variation by default: https://ibb.co/V9ZhGRj

Could you please share the exact Product URL of your Site on which the Free Shipping Bar is appearing in-between? So, we can look after this on your Site and assist you accordingly.

Best Regards

Yes, please check, I think that’s what I use in Linked Variation – by color.

But I offer a variety of sizes to choose from. I’ve read that you don’t guarantee to work correctly with variable products, but it seems to work so far so good. Only problem with Fria’s shipping bar.

Hello,

Sorry to say but it was quite difficult to manage this with Variable Product in terms of Free Shipping Bar adjustment because as you know you are using the default WooCommerce Single Product Layout so every other thing in this Layout is adjusted to their position accordingly. So, if we try to adjust this Free Shipping Bar here then we need to adjust the other things here too with that. So, we have tried a CSS solution but it is looking a bit odd when the dropdown Variants aren’t selected. It will look good after their selection.

So, here is the CSS that you can try out if this works out for you:

This CSS needs to be pasted under the Dashboard >> Theme Settings >> Custom CSS >> Global CSS section area:

.wd-after-add-to-cart {
    padding: 8em 0 0 0 !important;
}

.wd-shipping-progress-bar.wd-style-bordered {
    margin-top: 33% !important;
    position: absolute !important;
    width: 100% !important;
}

And this CSS needs to be pasted under the Dashboard >> Theme Settings >> Custom CSS >> Custom CSS for mobile area:

.wd-shipping-progress-bar.wd-style-bordered {
    margin-top: 74% !important;
    width: 90% !important;
}

So, if you want you can try out the CSS but we would personally suggest you not try to adjust this with the CSS, the Layout would not look good with that.

Best Regards

[Author]

Posts