Karta produktu w WooCommerce
Domyślny widok pojedynczego produktu w WooCommerce określa plik single-product.php, który znajdziemy w folderze woocommerce/templates.
Jeśli chcemy zmienić kolejność poszczególnych elementów na karcie produktu, to najbardziej powinna nas zainteresować ta część tego pliku:
<?php while ( have_posts() ) : the_post(); ?>
<?php wc_get_template_part( 'content', 'single-product' ); ?>
<?php endwhile; // end of the loop. ?>Te trzy linie kodu określają wszystko to co znajduje się pomiędzy: woocommerce_before_main_content oraz woocommerce_after_main_content.
Pętla wyświetla kartę produktu, odwołując się do pliku content-single-product.php w folderze woocommerce/templates
W pliku znajdziemy blok:
<div class="summary entry-summary">
<?php
/**
* Hook: woocommerce_single_product_summary.
*
* @hooked woocommerce_template_single_title - 5
* @hooked woocommerce_template_single_rating - 10
* @hooked woocommerce_template_single_price - 10
* @hooked woocommerce_template_single_excerpt - 20
* @hooked woocommerce_template_single_add_to_cart - 30
* @hooked woocommerce_template_single_meta - 40
* @hooked woocommerce_template_single_sharing - 50
* @hooked WC_Structured_Data::generate_product_data() - 60
*/
do_action( 'woocommerce_single_product_summary' );
?>
</div>Nazwa produktu to single_title, cena to price, kategorie, SKU to single_meta itd.
Zwróć uwagę na liczby (priorytet), przyda się to nam za chwilę.
Jak usunąć element z karty produktu?
Choć wygląda to na skomplikowaną operację to sprawa jest naprawdę bardzo prosta. Potrzebujemy tylko dostęp do pliku funtions.php (najlepiej w motywie potomnym).
Wklejamy poniższy kod:
/* Remove excerpt in single product */
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20);Co wprowadza zmiana? „Odpina” krótki opis produktu o priorytecie 20. Po odświeżeniu strony, nie zobaczymy już krótkiej zajawki pod ceną.
Jak zmienić miejsce poszczególnych elementów?
Postępujemy analogicznie jak przy usuwaniu. Pokażę na przykładzie, powiedzmy, że chcemy przenieść cenę nad przycisk „Dodaj do koszyka”.
Wklejamy poniższy kod do pliku functions.php:
/* Move price over the add to cart */
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10);
add_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 25);Zapisujemy i wysyłamy na serwer.
Co wprowadza powyższa zmiana? Otóż mówiąc jak najprościej usuwa „cenę” o priorytecie 15 i ponownie dodaje ją z priorytetem 25, czyli tuż przed woocoomerce_template_add_to_cart (priorytet 30).
Postępuj analogicznie z pozostałymi elementami, zmieniaj kolejność usuwaj.
Pamiętaj by zmiany wprowadzać w motywie potomnym, tylko dzięki takiemu działaniu aktualizacje WooCommerce oraz motywu z którego korzystasz nie nadpiszą wprowadzonych zmian.
Na dzisiaj to tyle. Udanego weekendu!
ps. w kolejnym wpisie pokażę jak dodawać nowe elementy na karcie produktu oraz jak połączyć to z ACF Pro – będzie to pierwszy wpis z cyklu Premium, do którego dostęp będzie możliwy tylko poprzez wykup abonamentu w sklepie wp-lab.pl
