How to convert select options (product attributes) to clickable divs in variable product page in WooCommerce?

Asked
Active3 hr before
Viewed126 times

8 Answers

convertoptionsselect
90%

All select options of each product attribute will be converted into div (even more than one).,automatically hide attributes that do not correspond to any product variation (based on one or more selected divs),The reason is simple. WooCommerce uses several scripts based on the select options elements, and replacing the options with divs could generate unexpected conflicts., 3 Use the woocommerce_dropdown_variation_attribute_options_html hook to replace select options with divs. – Vincenzo Di Gaetano Apr 18 at 20:51

CSS

/* adds style to divs */
/* by default all divs are hidden */
div.custom_option {
   display: none;
   border: 2 px solid #ccc;
   margin - right: 5 px;
   padding: 2 px 5 px;
   cursor: pointer;
}

/* show only divs with class "is-visible" */
div.custom_option.is - visible {
   display: inline - block;
}

/* adds the style to the selected div */
div.custom_option.on {
      background - color: #777;
    color: white;
}
88%

How I can display product variations dropdown select on the Cart page? ,function woo_display_variation_dropdown_on_shop_page() {,Added code: // Display variations dropdowns on shop page for variable products add_filter( 'woocommerce_loop_add_to_cart_link', 'woo_display_variation_dropdown_on_shop_page' );,Edit: its working now Changed row 11 into: $attribute_keys = array_keys( $product->get_variation_attributes() ); Changed row 22 into: get_variation_attributes() as $attribute_name => $options ) : ?>

load more v
72%

WooCommerce: Custom Related Products ,WooCommerce: View Product/Order Hidden Custom Fields (“Protected Meta”) ,WooCommerce: Get Currently Selected Variation ID ,WooCommerce: Always Show Single Variation Price @ Single Product

/**
 * @snippet       Add Custom Field to Product Variations - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 4.6
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

// -----------------------------------------
// 1. Add custom field input @ Product Data > Variations > Single Variation

add_action( 'woocommerce_variation_options_pricing', 'bbloomer_add_custom_field_to_variations', 10, 3 );

function bbloomer_add_custom_field_to_variations( $loop, $variation_data, $variation ) {
   woocommerce_wp_text_input( array(
'id' => 'custom_field[' . $loop . ']',
'class' => 'short',
'label' => __( 'Custom Field', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, 'custom_field', true )
   ) );
}

// -----------------------------------------
// 2. Save custom field on product variation save

add_action( 'woocommerce_save_product_variation', 'bbloomer_save_custom_field_variations', 10, 2 );

function bbloomer_save_custom_field_variations( $variation_id, $i ) {
   $custom_field = $_POST['custom_field'][$i];
   if ( isset( $custom_field ) ) update_post_meta( $variation_id, 'custom_field', esc_attr( $custom_field ) );
}

// -----------------------------------------
// 3. Store custom field value into variation data

add_filter( 'woocommerce_available_variation', 'bbloomer_add_custom_field_variation_data' );

function bbloomer_add_custom_field_variation_data( $variations ) {
   $variations['custom_field'] = '<div class="woocommerce_custom_field">Custom Field: <span>' . get_post_meta( $variations[ 'variation_id' ], 'custom_field', true ) . '</span></div>';
   return $variations;
}
load more v
65%

Select Custom product attribute and click Add.,With attributes created and saved to add a variation, go to the Variations section in the Product data meta box.,To add a new attribute specific to this product:,Select Save attributes.

75%

You can use the Product type option to choose the variable products you want to change the price range format for. The WooCommerce Variation Prices plugin lets you select variable products, grouped products, or both.,Once that’s done, you can change the price range for variable products.,Tips, WooCommerce Tutorials,If you select the Custom option, a Custom format field will appear. You can enter any text along with %min% and %max% tags to display the variable product price ranges however you’d like.

Hey, this is actually a lot less complicated. Give this a go:

/**
 * Format price range.
 *
 * @param string $price
 * @param $from
 * @param $to
 *
 * @return string
 */
function iconic_format_price_range($price, $from, $to) {
   return str_replace('–', '/', $price);
}

add_filter('woocommerce_format_price_range', 'iconic_format_price_range', 10, 3);
40%

Products per Page – Add “products per page” selector to WooCommerce (Select options available in paid Booster bundles).,Dev – PRODUCTS – Product Listings – Shop Page Display Options – “Exclude Categories Products” option added.,Fix – PRODUCTS – Product Listings – “Hide Empty” option for “Shop Page Display Options” and “Category Display Options” fixed (was giving reverse results).,Product Listings – Change display options for shop and category pages: show/hide categories count (Hide subcategories count on category pages allowed Available in paid Booster bundles), exclude categories, show/hide empty categories.

load more v
22%

You can see this product here. Notice how the size information fields change when you select a different variation.,Easily add custom fields to any WooCommerce product you like,It’s easy to add a custom field to a product in WooCommerce:,Display different custom information depending on which variation the user has selected

Hi Lia – if you’re using the custom code above, you can use something like this:

$product = wc_get_product(get_the_ID());
$field_value = $product - > get_meta('id_rel_post');
load more v
60%

Go to WooCommerce > Settings, select the Products tab, and then choose the Display option. For each of the Shop Page Display and Default Category Display options, select Show both.,Go to WooCommerce → Settings, select the Products tab, and then choose the Display option. For each of the Shop Page Display and Default Category Display options, select Show products. Save your changes.,Identifying WooCommerce Code to Output Categories and Products in Archives,WooCommerce Plugins Themes

Display WooCommerce Product Category

function woocommerce_product_category( $args = array() ) {
    $woocommerce_category_id = get_queried_object_id();
  $args = array(
    	'parent' => $woocommerce_category_id
  );
  $terms = get_terms( 'product_cat', $args );
  if ( $terms ) {
    	echo '<ul class="woocommerce-categories">';
    	foreach ( $terms as $term ) {
        	echo '<li class="woocommerce-product-category-page">';
            woocommerce_subcategory_thumbnail( $term );
        	echo '<h2>';
        	echo '<a href="' .  esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
        	echo $term->name;
        	echo '</a>';
        	echo '</h2>';
        	echo '</li>';
    	}
    	echo '</ul>';
  }
}
add_action( 'woocommerce_before_shop_loop', 'woocommerce_product_category', 100 );

Here’s how you can easily get the subcategory of WooCommerce product categories by using a custom function that takes advantage of parent product category slug.

function woocommerce_get_product_category_of_subcategories( $category_slug ){
  $terms_html = array();
  $taxonomy = 'product_cat';
  
  $parent = get_term_by( 'slug', $category_slug, $taxonomy );
  
  $children_ids = get_term_children( $parent->term_id, $taxonomy );
 
 	
  foreach($children_ids as $children_id){
    	$term = get_term( $children_id, $taxonomy ); 
    	$term_link = get_term_link( $term, $taxonomy ); 
    	if ( is_wp_error( $term_link ) ) $term_link = '';
   	
    	$terms_html[] = '<a href="' . esc_url( $term_link ) . '" rel="tag" class="' . $term->slug . '">' . $term->name . '</a>';
  }
  return '<span class="subcategories-' . $category_slug . '">' . implode( ', ', $terms_html ) . '</span>';
}

Display WooCommerce Category Description

global $post;
$args = array( 'taxonomy' => 'product_cat',);
$terms = wp_get_post_terms($post->ID,'product_cat', $args);
 
$count = count($terms);
if ($count > 0) {
 
  foreach ($terms as $term) {
    	echo '<div class="woocommerce-get-product-category">';
    	echo $term->description;
    	echo '</div>';
 
  }
 
}

Open your file and add this code to it.

< ? php
/**
 * Plugin Name: WooCommerce Product Category 
 * Description: Display WooCommerce categories on WooCommerce product pages
 **/

In your plugin file, add this:

function cloudways_product_subcategories($args = array()) {

}
add_action('woocommerce_before_shop_loop', 'cloudways_product_subcategories', 50);

Now add this code inside the function:

$parentid = get_queried_object_id();
         
$args = array(
    'parent' => $parentid
);
 
$terms = get_terms( 'product_cat', $args );
 
if ( $terms ) {
         
    echo '<ul class="product-cats">';
     
        foreach ( $terms as $term ) {
                         
            echo '<li class="category">';                 
                     
                woocommerce_subcategory_thumbnail( $term );
                 
                echo '<h2>';
                    echo '<a href="' .  esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
                        echo $term->name;
                    echo '</a>';
                echo '</h2>';
                                                                     
            echo '</li>';
                                                                     
 
    }
     
    echo '</ul>';
 
}

Now in your plugin file having name cloudways-product.php . Add the following code

function cloudways_product_cats_css() {

   wp_register_style('cloudways_product_cats_css', plugins_url('css/style.css', __FILE__));

   wp_enqueue_style('cloudways_product_cats_css');

}

add_action('wp_enqueue_scripts', 'cloudways_product_cats_css');
load more v

Other "convert-options" queries related to "How to convert select options (product attributes) to clickable divs in variable product page in WooCommerce?"