Zyrex

Jak zamienić select z wariantami produktu na element checkbox w WooCommerce

Jeśli chcemy uatrakcyjnić wygląd strony naszego produktu możemy zmienić wygląd wyboru wariantów. Otwórz plik functions.php swojego motywu lub utwórz nowy plik z kodem wtyczki. Dodaj następujący kod do pliku:

function custom_variation_checkboxes() {
  global $product;

  $attributes = $product->get_variation_attributes();
  $selected_value = $product->get_variation_default_attribute( 'size' );

  echo '<div class="variation-checkboxes">';

  foreach ( $attributes as $attribute_name => $options ) :
    echo '<div class="attribute-' . sanitize_title( $attribute_name ) . '">';
    echo '<h3>' . esc_html( wc_attribute_label( $attribute_name ) ) . '</h3>';
    echo '<ul>';
    foreach ( $options as $option ) :
      $checked = in_array( $option, $selected_value ) ? 'checked' : '';
      echo '<li><label><input type="checkbox" name="' . esc_attr( $attribute_name ) . '" value="' . esc_attr( $option ) . '" ' . $checked . '> ' . esc_html( $option ) . '</label></li>';
    endforeach;
    echo '</ul>';
    echo '</div>';
  endforeach;

  echo '</div>';
}
add_action( 'woocommerce_before_add_to_cart_button', 'custom_variation_checkboxes' );

Uwaga: Kod powyżej jest przykładowy i może wymagać dostosowania do indywidualnych potrzeb. W szczególności, atrybut „size” i nazwa wariantu „variation_id[]” mogą być inne w twoim przypadku i należy je odpowiednio zmienić.