[Support request] I want to add product details to the Header Element

[wonzilla]

How can I add the Short product description with Add to cart button and star rating to the Page Hero content? I want to create something similar:

https://ibb.co/XDSBvkR

Thank you!

[Tom]

You would need to use WooCommerce shortcodes: https://docs.woocommerce.com/document/woocommerce-shortcodes/

For example, for an Add to Cart button: https://docs.woocommerce.com/document/woocommerce-shortcodes/#section-15

For the product description, you’d likely need to create your own shortcode:

add_shortcode( 'wc_product_desc', function( $atts ) {
    $a = shortcode_atts( array(
        'id' => get_the_ID(),
    ), $atts );

    return get_the_excerpt( $a['id'] );
} );

Then you’d do this:

[wc_product_desc id="10]

10 being the ID of the product.

As for stars, I’m not sure how you’d wrap that into a shortcode. It may be worth asking WooCommerce support if they have a solution for that.

[wonzilla]

Hi Tom,

Thank you so much for your detailed answer! But how can I add shortcodes to the Header element? If I add them in the content, they are not recognized/displayed. Fortunately, I was able to add the short product description and price using custom fields but I’m still struggling with finding a solution for the add to cart button and stars rating. Any help will be much appreciated!

[wonzilla]

I guess that I need to add the php code with the Code Snippets plugin and then add the shortcode for a particular product in the Header content. However, isn’t any method to show the add to cart button/description for each product automatically without the product ID? This doesn’t seem to be the best way to do it when there are lots of products :/

[Tom]

That’s correct.

I just adjusted the shortcode function above with something that might detect the current ID if you leave the ID attribute empty.

I just checked their function for the add to cart shortcode, and it looks like it requires the ID or SKU. Would a custom button with the add to cart URL work, or do you need the full WC add to cart functionality?

[wonzilla]

Hi Tom,

If the custom build button works just like the WooCommerce button does, I would like to implement it. Btw, the short description appears now, thank you. However, I really need to add the star rating in the page hero content. It’s the second day I’m searching all over the internet for a solution. Isn’t there any hook or code that I need to add? 🙁

[Tom]

To get the add to cart button, you could do something like this:

add_shortcode( 'custom_add_to_cart', function() {
    return sprintf(
        '<a class="button add-to-cart-button" href="https://yourwebsite.com/?add-to-cart=%s">Add to Cart</a>',
        get_the_ID()
    );
} );

Just be sure to change yourwebsite.com with your URL.

Then you can do this: [custom_add_to_cart]

I’m not sure about the stars, unfortunately. You may need to ask WooCommerce support if it’s possible to output them using a shortcode.

[wonzilla]

Hi Tom,

Thank you for the code, it works! However, if the button is clicked one more time, it redirects to the homepage instead of showing the “You cannot add another “Item” to your cart.” message. Also, when I click the actual woocommrce button, I get two error messages – see the screenshot:
https://ibb.co/Xt9LRyj

Is there any fix to this?

[Tom]

Yea, that’s the limitation of the simple button – it won’t have the complexity of the regular add to cart buttons.

You’ll likely need to ask WooCommerce support if a function exists for that and the product ratings so we can add them to shortcodes. I’m not able to find anything by searching.

[wonzilla]

Got it, thank you for your answers!

[Tom]

No problem!

[Author]

Posts