• Resolved jordo

    (@jordo)


    The product listings display differently between the standard WooCommerce Archive pages (Category page) and WooCommerce Blocks. 2 Main Challenges:

    1. I want to add the Short Description, and Quantity Selector to the product listing for the WooCommerce Blocks (specifically the “Products by Category” block).
    2. Match the styles of the WooCommerce Blocks to the existing WooCommerce styles (this just may have to be done manually by adding additional css).

    Here is a screenshot of the Archive Category page which I want to replicate for the WooCommerce Blocks:

    Here is a screenshot of the WooCommerce “Products by Category” block:

    I’ve already added a php snippet to add the Quantity Selector to the Archive pages, however it does not add it to the WooCommerce Blocks:

    /**
     * Override loop template and show quantities next to add to cart buttons
     */
    add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
    function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) {
        if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
            $html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
            $html .= woocommerce_quantity_input( array(), $product, false );
            $html .= '<button type="submit" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
            $html .= '</form>';
        }
        return $html;
    }

    Is there a similar solution to hook into a filter to add the Short Description and Quantity Selector to the WooCommerce Blocks?

    I believe this is the filter for the products in grid used across multiple blocks: ‘woocommerce_blocks_product_grid_item_html’

    I found this?stack overflow article?that seems to have a solution for adding the short description, just not sure how to tweak it to also add the Quantity Selector…

    Any help would be greatly appreciated! Thank you!

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Saif

    (@babylon1999)

    Hello @jordo,

    Thank you for reaching out!

    The product listings display differently between the standard WooCommerce Archive pages (Category page) and WooCommerce Blocks. 2 Main Challenges:

    The syles won’t be the same for WooCommerce blocks and normal archive pages because the latter is rendered by your theme.

    Match the styles of the WooCommerce Blocks to the existing WooCommerce styles (this just may have to be done manually by adding additional css).

    We are limited in the amount of customization we can offer, as it is against our support policy. However, please feel free to share the URL of the page whose CSS you would like to mimic, and I or another contributor here might be able to help you. :?)

    I’ve already added a php snippet to add the Quantity Selector to the Archive pages, however it does not add it to the WooCommerce Blocks:

    At the time being, the category block does not provide a quantity selector; however, I believe this feature would be a significant improvement. Feel free to submit this as an “issues” report in the blocks development repository, here is a direct link.

    Is there a similar solution to hook into a filter to add the Short Description and Quantity Selector to the WooCommerce Blocks?

    The snippet won’t work because default WooCommerce templates and WooCommerce blocks don’t share the same hooks.

    WooCommerce hooks are a way to modify the functionality of WooCommerce in conjunction with themes or plugins.

    On the other hand, WooCommerce blocks provide a more visual approach to customizing the layout and design of your store without requiring coding knowledge.

    If you’re trying to build a custom solution around WooCommerce blocks, I suggest you check this part of the GitHub repository.

    Hope this helps!

Viewing 1 replies (of 1 total)
  • The topic ‘Add Quantity Selector and Short Description to WooCommerce Gutenberg Blocks’ is closed to new replies.