[Resolved] Woo Commerce Product Page: add “Link” excl. shipping after product price

[cpbee]

Dear Support,

I use WooCommerce on my page. I want to display on the individual product page (not the category page!) AFTER the price a text and link referring to the actual shipping conditions (this information should preferably be displayed as a overlay pop up).

With the following css snippet I managed so far to only display the text / information on the product page – however no link and no pop up …

.single-product span.woocommerce-Price-amount::after {
    content: ' zzgl. Versandkosten';
    font-size: small;
}

However it seems that I am not able to introduce a href-Link into a css snippet 🙂

Sample Produkt:
Sample Product

The link to the shipping conditions would be:
Shipping Conditions

How would I proceed from here to realize that?

Thanks for your help.

Best regards,
Chris.

[Ying]

Hi there,

CSS can not add actual content to the HTML, I think in your case, it’s better to use a hook element, try to follow the below steps:

1. Go to appearance > elements, create a new Hook element.

2. Add this to the content area of the hook element like this: https://www.screencast.com/t/zECfphZVkPF
<a class="shipping-condition" href="YOUR-URL">zzgl. Versandkosten</a>
Switch YOUR-URL with the shipping condition page URL.

3. Set the hook element location to products > all products, choose woocommerce_before_add_to_cart_form as the hook.
Here’s a woocommerce hook visual guide for your reference: https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

4. Add this CSS:

.single-product .summary.entry-summary {
    display: flex;
    flex-wrap: wrap;
}
.single-product a.shipping-condition {
    order: -1;
    padding-left: 20px;
}
.single-product h1.product_title.entry-title {
    order: -3;
}
.single-product p.price {
    order: -2;
}
.single-product .summary.entry-summary > * {
    width: 100%;
}

Let me know if that works for you 🙂

[cpbee]

Dear Ying,

thanks … generally it works – big thanks there!

But the formatting is odd. The text snippet is floating in a akward (unaligned) and non consistent position

For a “normal” product you can see that its “top” aligned to the price
https://www.imkereiausruester.ch/imkershop/rund-um-die-beute/smoker-und-brennstoff/smoker-original-dadant-klein/

For a “sales” product it is totally out of line and sticks at the description part
https://www.imkereiausruester.ch/imkershop/futter/agenabee-bienenfutter-fluessig-lose-kg-preis/

Could you please help me to align or position the hook in a “good” way?

Thanks.

[cpbee]

(maybe it would help if there is a line break for the sales product (the “old” price in the first line (strike-through) and the sales price (incl. shipping conditions) in the second line below?

[Ying]

I’ve updated the CSS at https://generatepress.com/forums/topic/woo-commerce-product-page-add-link-excl-shipping-after-product-price/#post-2051306

Try remove the old CSS, replace it with the new one.

[cpbee]

Dear Ying,

unfortunately the new CSS is even worse than the first one! All the link positions are now as following:

I reverted back to the old CSS configuration that only had a “problem” with the Link location for sales products?

Can you have another look / try here, please?

[Ying]

Sorry what are you trying to achieve? I’m confused. It looks good to me.
https://www.screencast.com/t/WYDC9enG

Let me know.

[cpbee]

I had to alter your CSS since the formatting was totally wrong.

Could you please update the above CSS code …

The current layout is based on this

.single-product .summary.entry-summary {
    display: flex;
    flex-wrap: wrap;
}
.single-product a.shipping-condition {
    order: -1;
		padding-left: 0px;
		padding-bottom: 40px;
}

.single-product a.shipping-condition:link {
	color:black;
}

.single-product a.shipping-condition:visited {
	color:black;
}

.single-product h1.product_title.entry-title {
    order: -3;
}
.single-product p.price {
    order: -2;
		padding-top:20px;
		height: 0px;
}
.single-product .summary.entry-summary > * {
    width: 100%;
}

But many thanks for your help and support. This topic is “solved”.

[Ying]

No problem 🙂

[Author]

Posts