Moving Woocommerce Add to Cart to Widget area

Hello All,

I have some working code, which currently works by adding the product add to cart information into the sidebar. However, I was preferably looking to either add this as a Widget to add in the back end or to add it to a specific custom sidebar instead of the beans primary sidebar.

Any help would be greatly appreciated.

function mycustomfunction() {

    // Remove items from summary
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

    // Add items to sidebar
    if ( is_singular( 'product' ) ) {
        add_action( 'beans_sidebar_primary', 'woocommerce_template_single_add_to_cart', 1 );
    }

}
add_action( 'wp', 'mycustomfunction' );

Update: I have managed to move the Add to cart box above the breadcrumbs using the hook :

beans_breadcrumb_before_markup 

But this is now no longer full width as it is contained within the fixed wrap div.

For some reason whenever I try to add the widget area to go above the

beans_fixed_wrap[_main]_before_markup 

then this will cause the add to cart box to break and it gives me this error:

Fatal error: Uncaught Error: Call to a member function get_type() on string in C:\xampp\htdocs\wordpress\wp-content\plugins\woocommerce\includes\wc-template-functions.php:987 

Stack trace: #0 C:\xampp\htdocs\wordpress\wp-includes\class-wp-hook.php(298): woocommerce_template_single_add_to_cart('') 
#1 C:\xampp\htdocs\wordpress\wp-includes\class-wp-hook.php(323): WP_Hook->apply_filters('', Array) #2 C:\xampp\htdocs\wordpress\wp-includes\plugin.php(453): WP_Hook->do_action(Array)
#3 C:\xampp\htdocs\wordpress\wp-content\themes\tm-beans\lib\api\utilities\functions.php(33): do_action('beans_widget_co...') 
#4 C:\xampp\htdocs\wordpress\wp-content\themes\tm-beans\lib\api\actions\functions.php(589): beans_render_function('do_action', 'beans_widget_co...') 
#5 C:\xampp\htdocs\wordpress\wp-content\themes\tm-beans\lib\api\html\functions.php(152): _beans_render_action('beans_widget_co...') 
#6 C:\xampp\htdocs\wordpress\wp-content\themes\tm-beans\lib\api\html\functions.php(188): beans_open_markup('beans_widget_co...', 'div') 
#7 C:\xampp\htd in C:\xampp\htdocs\wordpress\wp-content\plugins\woocommerce\includes\wc-template-functions.php on line 987

Hello,

If the WooCommerce add-to-cart form should go above the breadcrumbs (full-width) while breadcrumbs themselves retain the uk-container styling, the following should do the trick.

function mycustomfunction() {

    // Remove items from summary
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

    // Switch around uk-container classes so breadcumbs stay in container and WooCommerce form stay full-width
    beans_remove_attribute( 'beans_fixed_wrap[_main]', 'class', 'uk-container uk-container-center' );
    beans_add_attribute( 'beans_breadcrumb', 'class', 'uk-container uk-container-center' );

    // Add items to sidebar
    if ( is_singular( 'product' ) ) {
        add_action( 'beans_breadcrumb_before_markup', 'woocommerce_template_single_add_to_cart', 1 );
    }

}

add_action( 'wp', 'mycustomfunction' );

If you're still interested in putting this into a widget, here's a guide on adding widget areas and a previous discussion. About creating the widget itself, I honestly haven't done that too often - but I'm sure someone on StackExchange has.

Hi Kevin,

Thank you so much, problem solved! I was scratching my noodle on this one for a good number of hours, it completely surpassed me about removing / adding styling to the different containers. Because the beans_main_grid has a uk-grid on it with margin: 0; I added a new class just to centralize it all with margin: 0 auto;

I also managed to add the add to cart directly to a widgets text container, fully updated code below:

function mycustomfunction() {

    // Remove items from summary
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

     // Switch around uk-container classes so breadcumbs stay in container and WooCommerce form stay full-width
    beans_remove_attribute( 'beans_fixed_wrap[_main]', 'class', 'uk-container uk-container-center' );
    beans_add_attribute( 'beans_breadcrumb', 'class', 'uk-container uk-container-center' );
    beans_add_attribute('beans_main_grid', 'class', 'uk-center uk-container uk-container-center' );

    // Add items to sidebar
   if ( is_singular( 'product' ) ) {
        add_action( 'beans_widget_content[_ctabar][_text][_text-20]_prepend_markup', 'woocommerce_template_single_add_to_cart', 1 );
    }

}

Hey Hayden

Can you give some more details on how you got it to work in the sidebar? Thank you. Have a continued great holiday!