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

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

Home Forums Support Woo Commerce Product Page: add “Link” excl. shipping after product price

  • This topic has 8 replies, 2 voices, and was last updated 1 month ago by Ying.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #2051269
    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.

    #2051306
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #2051349
    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.

    #2051356
    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?

    #2051398
    Ying
    Staff
    Customer Support

    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.

    #2051937
    cpbee

    Dear Ying,

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

    Position

    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?

    #2052264
    Ying
    Staff
    Customer Support

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

    Let me know.

    #2052687
    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”.

    #2053115
    Ying
    Staff
    Customer Support

    No problem πŸ™‚

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.