Using Products dropdown from same category inside Woocommerce product short description answer code, I managed to create a products dropdown in WooCommerce.
On the <select>
tag I wanted to call a php function which adds the product to the cart based on the selected option from dropdown.
I changed in the code the <select>
tag with the following:
<select name="products-select" id="products-select" onchange="'.add_to_cart().'">
Php function to add woocommerce products to cart:
function add_to_cart(){
WC()->cart->add_to_cart( 1147 );
}
For some reason the function is called when I load the page.
To get a dropdown of related products from same product category that can be added to cart, It requires to use javascript making some changes in the code like:
add_shortcode( 'products_dropdown', 'wc_products_from_cat_dropdown' );
function wc_products_from_cat_dropdown( $atts ) {
// Shortcode Attributes
$atts = shortcode_atts( array(
'product_id' => '',
), $atts, 'products_dropdown' );
$product_id = is_product() ? get_the_id() : $atts['product_id'];
if ( empty($product_id) )
return;
ob_start();
$query = new WP_Query( array(
'post_type' => 'product',
'post_status' => 'publish',
'posts_per_page' => '-1',
'post__not_in' => array( $product_id ),
'tax_query' => array( array(
'taxonomy' => 'product_cat',
'field' => 'term_id',
'terms' => wp_get_post_terms( $product_id, 'product_cat', array( 'fields' => 'ids' ) ),
),
array(
'taxonomy' => 'product_type',
'field' => 'name',
'terms' => 'simple',
) ),
) );
if ( $query->have_posts() ) :
echo '<div class="products-dropdown"><select name="products-select" id="products-select">
<option value="">'.__('Choose a related product').'</option>';
while ( $query->have_posts() ) : $query->the_post();
$type = wp_get_post_terms( get_the_ID(), 'product_type', ['fields','slug'] );
print_pr($type);
echo '<option value="?add-to-cart='.get_the_ID().'">'.get_the_title().'</option>';
endwhile;
echo '</select><br><a class="button disabled" href="">'.__("add to cart").'</a></div>';
wp_reset_postdata();
endif;
?>
<script type='text/javascript'>
jQuery(function($){
var a = '.products-dropdown', b = a+' .button', d = 'disabled', s = a+' select';
$(document.body).on('change', s, function(){
var qv = $(this).val();
$(b).attr('href', qv);
if ( qv != '' ) {
$(b).removeClass(d).attr('href', $(this).val());
} else if ( qv == '' && ! $(b).hasClass(d) ) {
$(b).addClass(d);
}
}).on('click', b, function(e){
if ( $(b).attr('href') == '' ) {
e.preventDefault();
}
});
});
</script>
<?php
return ob_get_clean();
}
Code goes in functions.php file of the active child theme (or active theme). Tested and works.
The code will show a dropdown of simple products (from same product category(ies)) that with an add to cart button.
USAGE
1). For single product pages: Just paste the following shortcode in the product short description (or descrition):
[products_dropdown]
2). For single product pages, inside php code:
echo do_shortcode("[products_dropdown]");
3). on any post or page within the text editor, define the product_id argument (below the defined product id is 37
) :
[products_dropdown product_id="37"]
The add to cart button is disabled until a product is selected:
When a product is selected in the dropdown, the add to cart button get activated, and the selected product can be added to cart:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.