Woo Commerce Product Page: add "Link" excl. shipping after product price

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 :)

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.

(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?

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.

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?

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

Let me know.

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".

No problem :)