Zmiana rozmiaru miniaturek w archiwum subkategorii – Woocommerce

Podczas, gdy rozmiary miniatur Woocommerce możemy zmieniać globalnie w ustawieniach szablonu, następuje problem, gdy chcemy użyć innych rozmiarów dla archiwum o typie wyświetlania “subkategorie”, ponieważ dziedziczony jest ten sam rozmiar i proporcje. Można to zmienić za pomocą filtru subcategory_archive_thumbnail_size:

function category_archive_thumbnail_size($u)
{
    return array(500, 350,true);
}
add_filter('subcategory_archive_thumbnail_size', 'category_archive_thumbnail_size');

Sprawdź jak włączyć przycinanie obrazu głównego na stronie produktu.

Dodatkowo należy zadeklarować nowy rozmiar miniatur oraz zregenerować pliki:

function register_size() {
   add_image_size( 'category_thumb', 500, 350,true );
}

add_action( 'after_setup_theme', 'register_size' );

Przycinanie głównego obrazu w Woocommerce 3.3+

W wersji Woocommerce 3.3 nastąpiło wiele zmian. Jedną z nich jest sposób zmiany rozmiarów obrazu głównego oraz miniaturek. Podczas, gdy do tej pory można było tego dokonać w ustawieniach woocommerce, teraz należy udać się do ustawień szablonu: Wygląd -> Personalizacja -> Woocommerce

Rozmiary obrazów możemy zadeklarować także za pomocą funkcji add_theme_support w następujący sposób:

add_theme_support( 'woocommerce', array(
 'thumbnail_image_width' => 250,
 'single_image_width' => 350,
) );

Problem pojawia się, gdy chcemy, by nasz główny obraz został przycięty w zastępstwie rozmiaru oryginalnego. Niestety jak widać na zrzucie powyżej, widnieje informacja: Rozmiar używany dla głównego obrazka na stronie produktu. Te obrazki nie będą przycinane.

Oznacza to, iż nie mamy wpływu na przycinanie z poziomu ustawień szablonu. W takim przypadku musimy użyć filtru, dodając go do functions.php zmieniając rozmiar obrazu głównego oraz aktywując tryb przycinania:

add_filter( 'woocommerce_get_image_size_single', 'own_size_woocommerce_mainimage_wpgeek' );
function own_size_woocommerce_mainimage_wpgeek()
{
    $size = array(
        'width'  => 300,
        'height' => 300,
        'crop'   => 1,
    );
    return $size;
}

Jeśli przed zmianami posiadaliśmy już produkty w naszym sklepie, należy zregenerować rozmiary obrazów, np. za pomocą wtyczki Regenerate Thumbnails.

Ajax’owa zmiana danych z koszyka i wybór liczby produktów – WooCommerce

W przypadku, gdy stworzymy własny przycisk koszyka, bądź wyświetlamy dowolne informacje na temat zawartości koszyka, chcemy również, aby były one na bieżąco odświeżane. Mianowicie po dodaniu danej liczby produktów do koszyka. Oto sposób, by tego dokonać:

WYBÓR LICZBY PRODUKTÓW PRZY DODAWANIU DO KOSZYKA

Na początek musimy umożliwić wybór liczby produktów. W tym celu, zastępujemy standardowy przycisk własnym, dodając kod do functions.php:

add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 ); 

function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) { 
    if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
        $html = '<form action="'.esc_url( $product->add_to_cart_url() ).'" class="cart" method="post" enctype="multipart/form-data">'; 
        $html .= woocommerce_quantity_input( array(), $product, false ); 
        $html .= '<button type="submit" data-quantity="1" data-product_id="'.$product->id.'" class="button alt ajax_add_to_cart add_to_cart_button product_type_simple">'.__('Add to cart', 'woocommerce').'</button> </form>'; 
    } 
    return $html;
}

WYŚWIETLANIE INFORMACJI NA TEMAT ZAWARTOŚCI KOSZYKA…

…na przykładzie własnego przycisku ‘koszyka’.

<div class="cart-info-container"> 
    <a class="cart-link" href="<?php echo wc_get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"> 
        <?php _e('Cart', 'woocommerce'); ?> (<?php echo sprintf ( _n( '%d', '%d', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?>) 
    </a> 
</div>

Następnie dodajemy funkcję w functions.php umożliwiającą pobranie danych ponownie, po dodaniu do koszyka, czyli kod naszego przycisku:

function theme_slug_dynamic_fragment() {
   $output = '';
   $output .= '<span class="cart-info">';
   $output .= '<a class="cart-link" href="';
   $output .= wc_get_cart_url().'" title="'.__( "View your shopping cart" ).'">';
   $output .= __('Cart', 'woocommerce');
   $output .= sprintf ( _n( '( %d', '( %d', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ) ;
   $output .= ')</a>';
   $output .= '</span>'; 
  
   echo $output;
   die;
}
add_action('wp_ajax_my_ajax_cart', 'theme_slug_dynamic_fragment');
add_action('wp_ajax_nopriv_my_ajax_cart', 'theme_slug_dynamic_fragment');

Aktualizacja danych po dodaniu produktu do koszyka, bądź usunięciu produktu z karty

Ostatnim etapem jest dodanie w odpowiednie miejsce kodu JavaScipt, odpowiedzialnego za zmianę liczby produktów w formularzu ‘dodawania do koszyka’ oraz za podmianę informacji zaraz po dodaniu produktów:

jQuery(function ($) {
 
  $(document).ready(function() {
     // resetowanie liczby po odświeżeniu strony
     $('form input.qty').val(1);
    
     // podstawienie wybranej liczby
     $("form.cart").on("change", "input.qty", function() {
       if (this.value === "0")
         this.value = "1";
       $(this.form).find("button[data-quantity]").data("quantity", this.value);
     });
   
     // dynamiczne odświeżenie informacji po dodaiu do koszyka oraz przy usunięciu produktów z karty
     $(document.body).on("added_to_cart updated_cart_totals updated_wc_div", function() {
  
       var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
       $.ajax({
         url: ajaxurl , 
           data: {
           'action': 'my_ajax_cart' // nazwa naszej funkcji 
         },
         success:function(data) {
           $('.cart-info').html(data);
         },
         error: function(errorThrown){
           console.log(errorThrown);
         }
         });
  
    });
   
  });
});