WP-CITY.RU

Авторские шаблоны WordPress

Недорогой, функциональный сайт или Интернет-магазин
за 10 000 руб!


Заказать интернет-магазин сейчас

Стилизуем вариативный товар в магазине WooCommerce

Всем доброго дня, сегодня немного поделюсь с вами, как можно немного стилизовать вариативный товар в магазине WooCommerce.
По умолчанию, выбор сделан списками селект, лично мне при создании магазинов это очень не нравится, хотя есть плагины которые позволяют сделать выбор по цветам и размерам, но как правило они громоски, для покупателя есть одно хорошее правило, чем легче купить тем лучше.

Скачать архив Посмотреть демо

Итак приступим, для начала нам нужно поменять шаблон вывода вариативного товара, шаблон находится по адресу, ваш шаблон/woocommerce/single-product/add-to-cart/variable.php? откройте его редактором, удалите стандартный вывод и замени на новый:

<?php
/**
 * Variable product add to cart
 *
 * @author  WooThemes
 * @package WooCommerce/Templates
 * @version 2.5.0
 *
 * Modified to use radio buttons instead of dropdowns
 * @author 8manos
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

function print_attribute_radio( $checked_value, $value, $label, $name ) {
	// This handles < 2.4.0 bw compatibility where text attributes were not sanitized.
	$checked = sanitize_title( $checked_value ) === $checked_value ? checked( $checked_value, sanitize_title( $value ), false ) : checked( $checked_value, $value, false );

	$input_name = 'attribute_' . esc_attr( $name ) ;
	$esc_value = esc_attr( $value );
	$id = esc_attr( $name . '_v_' . $value );
	$filtered_label = apply_filters( 'woocommerce_variation_option_name', $label );
	printf( '<div><input type="radio" name="%1$s" value="%2$s" id="%3$s" %4$s><label for="%3$s">%5$s</label></div>', $input_name, $esc_value, $id, $checked, $filtered_label );
}

global $product;

$attribute_keys = array_keys( $attributes );

do_action( 'woocommerce_before_add_to_cart_form' ); ?>

<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( $available_variations ) ) ?>">
	<?php do_action( 'woocommerce_before_variations_form' ); ?>

	<?php if ( empty( $available_variations ) && false !== $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" style="border:none!important;">
			<tbody>
				<?php foreach ( $attributes as $name => $options ) : ?>
					<tr>
    <td class="label"><label for="<?php echo sanitize_title( $name ); ?>"><?php echo wc_attribute_label( $name ); ?></label></td>
						<?php
						$sanitized_name = sanitize_title( $name );
						if ( isset( $_REQUEST[ 'attribute_' . $sanitized_name ] ) ) {
							$checked_value = $_REQUEST[ 'attribute_' . $sanitized_name ];
						} elseif ( isset( $selected_attributes[ $sanitized_name ] ) ) {
							$checked_value = $selected_attributes[ $sanitized_name ];
						} else {
							$checked_value = '';
						}
						?>
                        
                        </td>
  </tr>
                        
                        
						<tr>
    <td class="value">
							<?php
							if ( ! empty( $options ) ) {
								if ( taxonomy_exists( $name ) ) {
									// Get terms if this is a taxonomy - ordered. We need the names too.
									$terms = wc_get_product_terms( $product->id, $name, array( 'fields' => 'all' ) );

									foreach ( $terms as $term ) {
										if ( ! in_array( $term->slug, $options ) ) {
											continue;
										}
										print_attribute_radio( $checked_value, $term->slug, $term->name, $sanitized_name );
									}
								} else {
									foreach ( $options as $option ) {
										print_attribute_radio( $checked_value, $option, $option, $sanitized_name );
									}
								}
							}

							echo end( $attribute_keys ) === $name ? apply_filters( 'woocommerce_reset_variations_link', '</br><a class="reset_variations" href="#"><i class="fa fa-times-circle" aria-hidden="true"></i> ' . __( 'Clear', 'woocommerce' ) . '</a>' ) : '';
							?>
						</td>
					</tr>
				<?php endforeach; ?>
			</tbody>
		</table>

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

		<div class="single_variation_wrap">
			<?php do_action( 'woocommerce_before_single_variation' ); ?>

			<?php
			if ( has_action( 'woocommerce_single_variation' ) ) {
				do_action( 'woocommerce_single_variation' );
			} else {
				// Backwards compatibility with WC < 2.4
			?>
				<div class="woocommerce-variation single_variation"></div>

				<div class="woocommerce-variation-add-to-cart variations_button" style="display:none">
					<?php if ( ! $product->is_sold_individually() ) : ?>
						<?php woocommerce_quantity_input( array( 'input_value' => isset( $_POST['quantity'] ) ? wc_stock_amount( $_POST['quantity'] ) : 1 ) ); ?>
					<?php endif; ?>
					<button type="submit" class="single_add_to_cart_button button alt otto"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>
					<input type="hidden" name="add-to-cart" value="<?php echo absint( $product->id ); ?>" />
					<input type="hidden" name="product_id" value="<?php echo absint( $product->id ); ?>" />
					<input type="hidden" name="variation_id" class="variation_id" value="0" />
				</div>
			<?php } ?>

			<?php 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 do_action( 'woocommerce_after_add_to_cart_form' ); ?>

После замены вывода, залейте файл в туже папку и замените.

Далее нам нужно отключить стандартный скрипт отвечающий за работоспособность нашего выбора и подключить свой, новый скрипт add-to-cart-variation.js.
Нижеприведенный код надо вставить в файл шаблона functions.php

function my_scripts_method() {
wp_deregister_script( 'wc-add-to-cart-variation' );
wp_register_script( 'wc-add-to-cart-variation', get_template_directory_uri() . '/js/add-to-cart-variation.js', array(), '' , true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Вот теперь мы удалили стандартный вывод и заменили его своим, осталось только стилизовать наш выбор товара.

 input[type="radio"] {
    display:none;
}
 input[type="radio"]:not(:checked) + label {
    color: #666666; float:left;font-weight: normal!important; padding:0 5px 0 5px!important; font-size:12px; cursor:pointer;font-style:italic!important;text-transform:uppercase
}

  input[type="radio"]:checked + label {
    color: #dd3c1e;padding:0 5px 0 5px!important;float:left; border:1px solid #ccc;font-weight: normal!important; background:#FFFFFF;-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;font-size:12px;font-style:italic!important; text-transform:uppercase
}

Вот теперь у нас все готово, надеюсь данный снипет вам пригодится, удачных всем продаж!

  1. Артем

    Поправьте ссылку

  2. Юлия

    В какой файл вставить стилизацию вариации (последний код)?

  3. Дмитрий

    Мой косяк,все работает автору добра)

  4. Дмитрий

    Классная статья,но есть один минус пропала цена(

© 2012–2017 / wp-city.ru / Авторские шаблоны WORDPRESS / Создание сайтов

evgeniy38868     krizisvt@i.ua