+48 506 130 673 info@tosetec.com

Jak przenieść przycisk „Dodaj do koszyka” pod zdjęcie produktu w motywie Divi ?

utworzone przez | lip 22, 2025 | Strona internetowa

Domyślnie motyw Divi umieszcza przycisk „Dodaj do koszyka” w sekcji z podsumowaniem produktu – obok zdjęcia. Jeśli chcesz, aby przycisk znajdował się pod zdjęciem produktu, masz kilka opcji: od edycji kodu PHP, przez stylizację CSS, aż po użycie kreatora Divi Builder.

🔧 Metoda 1: Zmiana układu za pomocą motywu potomnego i hooków WooCommerce (dla zaawansowanych)

Krok 1: Utwórz motyw potomny (jeśli jeszcze go nie masz)

Aby Twoje zmiany nie zostały nadpisane przy aktualizacji Divi, pracuj na motywie potomnym:

  1. Wejdź na serwer przez FTP (lub przez menedżer plików w panelu hostingu).

  2. Przejdź do wp-content/themes/ i utwórz nowy folder np. divi-child.

  3. Utwórz w nim plik style.css z zawartością:

/*
Theme Name: Divi Child
Template: Divi
*/

  1. Utwórz plik functions.php i dodaj:

<?php
function my_child_theme_enqueue_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'my_child_theme_enqueue_styles');
?>

  1. W WordPressie przejdź do Wygląd → Motywy i aktywuj motyw potomny.

Krok 2: Przenieś przycisk „Dodaj do koszyka” pod zdjęcie

W pliku functions.php dodaj poniższy kod:

function move_add_to_cart_under_image() {
if ( is_product() ) {
echo '<div class="custom-add-to-cart">';
woocommerce_template_single_add_to_cart();
echo '</div>';
}
}

remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);
add_action('woocommerce_after_single_product_summary', 'move_add_to_cart_under_image', 5);

✅ Co robi ten kod:

  • Usuwa przycisk z domyślnej pozycji.

  • Dodaje go pod zdjęciem produktu.

🎨 Metoda 2: Przeniesienie przyciskiem CSS (szybka modyfikacja)

Jeśli nie chcesz edytować PHP, możesz użyć CSS, by wizualnie przesunąć przycisk.

Krok 1: Znajdź klasę HTML przycisku

Na stronie produktu kliknij prawym przyciskiem myszy → Zbadaj element i zidentyfikuj klasę formularza koszyka (np. .woocommerce div.product form.cart).

Krok 2: Dodaj własny kod CSS

W WordPressie przejdź do Wygląd → Dostosuj → Dodatkowy CSS i dodaj:

.woocommerce div.product form.cart {
margin-top: 20px;
text-align: center;
display: block;
width: 100%;
}

.woocommerce div.product .images {
display: flex;
flex-direction: column;
align-items: center;
}

Ten kod sprawi, że przycisk znajdzie się pod zdjęciem i będzie odpowiednio wyśrodkowany.

🧱 Metoda 3: Użycie Divi Theme Builder (bez kodowania)

Jeśli korzystasz z edytora Divi, możesz zaprojektować własny szablon produktu:

  1. Przejdź do Divi → Theme Builder.

  2. Kliknij Dodaj szablon → Dodaj niestandardowe ciało → Buduj od podstaw.

  3. Dodaj:

    • Moduł Obraz (product image),

    • Moduł Woo Add to Cart pod spodem.

  4. Zapisz zmiany i przypisz szablon do produktów.

✅ Ten sposób jest idealny dla użytkowników, którzy wolą wizualne projektowanie bez grzebania w kodzie.

📌 Podsumowanie

Masz kilka możliwości, aby przenieść przycisk „Dodaj do koszyka” poniżej zdjęcia w WooCommerce z motywem Divi:

Metoda Dla kogo Zalety
PHP + Hooki Zaawansowani Pełna kontrola, optymalizacja
CSS Początkujący Szybko i bezpiecznie
Divi Builder Wszyscy Intuicyjna edycja, brak kodu

Wybierz opcję najlepiej dopasowaną do Twoich umiejętności i potrzeb sklepu.