• Resolved semidivine

    (@semidivine)


    The site I am working on is using WooCommerce and there is a function in the theme (Botiga) that creates a wrapper row that displays the sorting dropdown before the products grid. The default functionality is the dropdown displays in the right column of the row, the left column is empty. I want to add a category dropdown to the page and I want to insert it into the left column.

    Here is the original code in functions.php of the theme that displays the wrapper row with the sorting dropdown in the right column:

    /**
     * Wrap products results and ordering before
     */
    function botiga_wrap_products_results_ordering_before() {
        if( ! botiga_has_woocommerce_sorting_wrapper() ) {
            return;
        }
    
        echo '<div class="woocommerce-sorting-wrapper">';
        echo '<div class="row">';
        echo '<div class="col-md-6 col-6 botiga-sorting-left">';
        echo '<div class="botiga-sorting-left-inner">';
    }
    add_action( 'woocommerce_before_shop_loop', 'botiga_wrap_products_results_ordering_before', 19 );
    
    /**
     * Add a button to toggle filters on shop archives
     */
    function botiga_add_filters_button() {
        if( ! botiga_has_woocommerce_sorting_wrapper() ) {
            return;
        }
    
        echo '</div>';
        echo '</div>';
        echo '<div class="col-md-6 col-6 botiga-sorting-right">';
        echo '<div class="botiga-sorting-right-inner">';
    }
    add_action( 'woocommerce_before_shop_loop', 'botiga_add_filters_button', 22 );
    
    /**
     * Wrap products results and ordering after
     */
    function botiga_wrap_products_results_ordering_after() {
        if( ! botiga_has_woocommerce_sorting_wrapper() ) {
            return;
        }
    
        echo '</div>';
        echo '</div>';
        echo '</div>';
        echo '</div>';
    }
    add_action( 'woocommerce_before_shop_loop', 'botiga_wrap_products_results_ordering_after', 31 );
    
    /**
     * Check if has "woocommerce-sorting-wrapper"
     */
    function botiga_has_woocommerce_sorting_wrapper() {
        $shop_grid_list_view  = get_theme_mod( 'shop_grid_list_view', 0 );
        $shop_product_sorting = get_theme_mod( 'shop_product_sorting', 1 );
        $shop_results_count   = get_theme_mod( 'shop_results_count', 1 );
        $shop_archive_sidebar = get_theme_mod( 'shop_archive_sidebar', 'no-sidebar' );
    
        if( ! $shop_grid_list_view && ! $shop_product_sorting && ! $shop_results_count && $shop_archive_sidebar !== 'sidebar-slide' ) {
            return false;
        }
    
        return true;
    }

    This is the widget code that displays the category dropdown that I want to insert in the left column of the wrapper:

    the_widget( 'WC_Widget_Product_Categories', 'dropdown=1' );

    I am unsure how to proceed. I’ve been playing around with recreating the functions in my child theme functions.php by removing the existing actions and creating my own, but all I got was two separate wrappers, one with the category dropdown in the left column and a separate one with the sorting dropdown in the right column. Can anyone lead me in the right direction?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Hi @semidivine,

    Thanks for reaching out with your question about adjusting the layout of the WooCommerce shop page in the Botiga theme. To insert the category dropdown into the left column of the wrapper row, you’ll need to make some adjustments to your child theme’s functions.php file. Here’s a streamlined guide to help you:

    1. Override Existing Functions: In your child theme’s functions.php, remove the actions botiga_wrap_products_results_ordering_before, botiga_add_filters_button, and botiga_wrap_products_results_ordering_after from the woocommerce_before_shop_loop hook.
    2. Insert Category Dropdown: After removing the actions, add a new function to create the wrapper row with the category dropdown in the left column. You can use the the_widget function to display the WooCommerce Product Categories widget with the dropdown parameter set to 1.
    3. Test Your Changes: Save the modifications to functions.php and refresh your shop page to see if the category dropdown appears in the desired location.

    Please note that writing or providing custom code is not within the scope of our support policy. For development and custom coding questions, it’s best to ask for insight related to those on either the WooCommerce Advanced Facebook group or the WooCommerce Community Slack. You can also seek help from the following:

    I wish I could help more, but hopefully, this gets you going in the right direction to get the job done.

    We haven’t heard back from you in a while, so I’m going to mark this as resolved – we’ll be here if and/or when you are ready to continue.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Trying to insert widget code into before shoploop function’ is closed to new replies.