[Support request] Adding shortcode inside of block element

[Lars]

Hi

I am trying to add a woocommerce-shortcode on a block element för a product page.

[add_to_cart] should give me a button, but the result is blank.

Test page affected: https://nf.ahh.nu/produkt/melon-armenisk-melongurka/ (add-to-cart-button should be visible just above the extra info in the right side panel)

Any clues?

Thanks
Lars

[David]

Hi there,

where is the Block Element hooked into?

For the [add_to_cart] to work it has to be in the content of the post, or the product ID has to be included in the shortcode args

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Lars]

The block element is hooked into a product page and added in the right sidebar of that product. Can I retrieve the ID and somehow put it into the shortcode? I do have dynamic data working already in other places of the same block.

[Ying]

Hi Lars,

Can you try this PHP snippet:

function cart_shortcode($atts, $content = null) {
      ob_start();
      do_action('hook_cart');
      return ob_get_clean();
}
add_shortcode('portable_cart', 'cart_shortcode');

add_action('hook_cart', 'woocommerce_template_loop_add_to_cart',  10);

Adding PHP: https://docs.generatepress.com/article/adding-php/

Use [portable_cart] in your block element.

[Lars]

Hi Ying! And big thank you. You guys always go the extra length.

Fundamentally it works, thanks. It seems I can not give it attributes as I can with the original shortcode. I would like to be able to add CSS-classes and price-info and also, if possible, make it not show if the quantity of the product equals zero.

This is beyond generatepress, but do you know how to also show stock quantity with a shortcode?

[David]

theres the do_shortcode function.
So you could do something like this in a regular hook:

<?php
global $product;
$id = $product->get_id();

echo do_shortcode('[add_to_cart id="' . $id . '"]');

?>

you can add whatever args to your shortcode this way.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Lars]

Very cool! I am at a loss as how to use this though. Can you give me an example? Thanks

If I would have code snippets and their block, then I could hook that code that you gave me into a block on one of your elements, is that correct?

[David]

You can:

1. Create a New Hook Element in Appearance > Elements,
2. Add the code in the hook text area
3. Select your Hook
4. Check the Execute PHP and Shortcode Options
5. Set your Display Rules.

That should output the shortcode for you.
What i cannot say is if that shortcode will work outside of the post loop content….

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Lars]

I doesn’t seem to be working there, unfortunately. Is this because it’s retroactively generated content?

I will need to find another solution for this. What I want is to have a custom button displayed for easier access to buying a product and I loved the idea of using generatepress (and blocks) and generate the dynamic content where I did and having the button show just above it. Visually pleasing and of course not impossible to solve, but maybe for me.

[Lars]

The solution of Ying works, but how can I add other information there such as price and perhaps changing the text of the button and so on?

[Lars]

I found this (and it works properly and I understand how to change it):

function add_content_after_addtocart() {
     
        // get the current post/product ID
        $current_product_id = get_the_ID();
     
        // get the product based on the ID
        $product = wc_get_product( $current_product_id );
     
        // get the "Checkout Page" URL
        $checkout_url = WC()->cart->get_checkout_url();
     
        // run only on simple products
        if( $product->is_type( 'simple' ) ){
            echo '<div class="clear-sec">';
            echo '</div>';
            echo '<a href="'.$checkout_url.'?add-to-cart='.$current_product_id.'" class="buy-now button">Köp nu</a>';
            //echo '<a href="'.$checkout_url.'" class="buy-now button">Buy Now</a>';
        }
    }
    add_action( 'generate_before_right_sidebar_content', 'add_content_after_addtocart' );

[David]

I would suggest checking this:

https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

It shows you each of the function callbacks made by woocommerce on the single product page.
Any of those can be hooked into the add_action('hook_cart', from Yings code.

Changing things like the button text, you would need to use the appropriate filter for example: woocommerce_product_single_add_to_cart_text – see here for an example of its use:

https://generatepress.com/forums/topic/quantity-buttons-added-and-add-to-cart-button-in-one-line/#post-1535425

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

Glad to hear you found a solution 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Lars]

Dear Ying

Maybe I am a little late to the ball, but would you mind giving me a small example of how to change the text of the button in your proposed shortcode? And also how to change whatever is shown when the product is out of stock.

Thanks
Lars

[Ying]

Hi Lars,

My code has nothing to do with the content that this function woocommerce_template_loop_add_to_cart generates.

You will need to add another Woocommerce filter to change the text:

// To change add to cart text
add_filter( 'woocommerce_product_add_to_cart_text', 'woocommerce_custom_add_to_cart_text' ); 
function woocommerce_custom_add_to_cart_text($text) {
	 if ( 'Read more' == $text ) {
        return __( 'More Info', 'woocommerce' );
    }
    return __( 'Buy Now', 'woocommerce' ); 
}

Just replace the More Info and Buy Now with your words.

[Author]

Posts