Snippet

Dostosuj Liczbę Kolumn w Siatce Produktów WooCommerce

Jak zmienić liczbę kolumn w siatce WooCommerceDostosuj kolumny siatki produktów w WordPressieDostosuj układ siatki produktów WooCommerceZmień kolumny w siatce produktów WooCommerceZmodyfikuj liczbę kolumn w siatce produktów WordPressUstaw różne kolumny dla siatki produktów WooCommerceJak dostosować kolumny siatki produktów w WordPressieZmień układ siatki produktów w WooCommerceDostosuj liczbę kolumn na stronie sklepu WooCommerceJak ustawić kolumny w wyświetlaniu produktów WooCommerce

Objaśnienie

Chcesz zmienić, ile produktów wyświetla się w rzędzie na stronie sklepu WooCommerce? Oto prosty sposób, aby to zrobić!

Dostosowanie liczby kolumn:

  • Istnieje funkcja, która ustawia, ile produktów pojawia się obok siebie. W tym przykładzie jest ustawiona na 4 kolumny.
  • Jeśli chcesz inną liczbę, po prostu zmień liczbę 4 na taką, która pasuje do twojego układu.

Gdzie to działa:

  • To ustawienie dotyczy głównej strony sklepu, kategorii produktów oraz tagów produktów.
  • Zapewnia, że wybrana liczba kolumn jest spójna na tych stronach.

Stylizacja siatki:

  • Dodano trochę niestandardowego CSS, aby upewnić się, że produkty są ładnie wyrównane.
  • Szerokość każdego produktu jest obliczana na podstawie liczby kolumn. Na przykład, jeśli ustawisz na 4 kolumny, każdy produkt zajmuje 25% rzędu.

Po prostu dostosuj liczbę w kodzie do swoich potrzeb, a twój sklep WooCommerce wyświetli produkty w schludnej siatce, której pragniesz!

Kod

1// Function to change the number of columns in WooCommerce product grid 2function wp_dudecom_set_woocommerce_product_columns( $columns ) { 3 // Set the number of columns you want to display 4 $columns = 4; 5 return $columns; 6} 7add_filter( 'loop_shop_columns', 'wp_dudecom_set_woocommerce_product_columns', 20 ); 8 9// Function to ensure the number of columns is applied to the product archive pages 10function wp_dudecom_custom_woocommerce_loop_columns() { 11 if ( is_shop() || is_product_category() || is_product_tag() ) { 12 add_filter( 'loop_shop_columns', 'wp_dudecom_set_woocommerce_product_columns', 20 ); 13 } 14} 15add_action( 'wp', 'wp_dudecom_custom_woocommerce_loop_columns' ); 16 17// Function to add custom CSS for WooCommerce product grid columns 18function wp_dudecom_custom_woocommerce_styles() { 19 ?> 20 <style type="text/css"> 21 .woocommerce ul.products { 22 display: flex; 23 flex-wrap: wrap; 24 } 25 .woocommerce ul.products li.product { 26 width: calc(100% / 4); /* Adjust the number here to match the column count */ 27 } 28 </style> 29 <?php 30} 31add_action( 'wp_head', 'wp_dudecom_custom_woocommerce_styles' );

Instrukcja

Lokalizacja pliku: functions.php lub plik niestandardowej wtyczki

Wymagania wstępne:

  • Upewnij się, że WooCommerce jest zainstalowane i aktywowane na Twojej stronie WordPress.

Kroki wdrożenia:

  1. Uzyskaj dostęp do panelu administracyjnego WordPress.
  2. Przejdź do Wygląd > Edytor motywu, jeśli edytujesz plik functions.php, lub przejdź do Wtyczki > Edytor, jeśli używasz niestandardowej wtyczki.
  3. Znajdź plik functions.php aktywnego motywu lub plik niestandardowej wtyczki, do którego chcesz dodać kod.
  4. Skopiuj i wklej podany kod do pliku.
  5. Dostosuj liczbę 4 w kodzie do pożądanej liczby kolumn, które chcesz mieć w siatce produktów.
  6. Zapisz zmiany w pliku.
  7. Odwiedź stronę swojego sklepu WooCommerce, kategorie produktów lub tagi produktów, aby zobaczyć wprowadzone zmiany.

Jeśli potrzebujesz pomocy przy tym wdrożeniu lub wymagasz bardziej zaawansowanej funkcjonalności, rozważ skontaktowanie się z wp-dude.com w celu uzyskania fachowej pomocy.