Come mostrare le variazioni del menu a tendina a tendina sulla pagina del negozio WooCommerce
Pubblicato: 2021-07-19
Stai cercando un modo per visualizzare le variazioni a discesa nella pagina del negozio di WooCommerce? In questo post, condivideremo una soluzione semplice per te. Tuttavia, utilizzeremo un codice personalizzato e ciò significa che è necessaria una certa esperienza di codifica per implementare questa soluzione.
La maggior parte dei negozi di eCommerce ha molte variazioni nei prodotti. I clienti devono fare clic sulle pagine dei singoli prodotti per vedere le variazioni.
Se visualizzi le varianti del prodotto nella pagina del negozio, le variazioni saranno più accattivanti per i clienti. Inoltre, questo ti permetterà di ingrandire il tuo prodotto in pochi click.
WooCommerce Mostra a discesa Variazioni a discesa nella pagina del negozio
Entro la fine di questa guida, sarai in grado di visualizzare le variazioni del menu a discesa in modo programmatico sulla pagina del negozio. Tuttavia, è importante tenere presente che è necessario creare prima una variante del prodotto nella pagina del prodotto.
Prima di procedere, dovresti anche installare o creare un tema figlio. Ciò garantirà che le modifiche non vadano perse durante un aggiornamento. Inoltre, devi eseguire il backup del tuo account in modo da poter ripristinare la versione precedente in caso di errore.
Entriamo subito in esso.
Passaggi per mostrare le variazioni a discesa a discesa nella pagina del negozio
Ecco i semplici passaggi che devi seguire:
- Accedi al tuo sito WordPress e accedi alla Dashboard come utente amministratore.
- Dal menu Dashboard, fai clic su Menu Aspetto > Menu Editor temi . Quando viene aperta la pagina Editor temi, cerca il file delle funzioni del tema per aggiungere la funzione per visualizzare le variazioni a discesa nella pagina del negozio.
- Aggiungi il seguente codice al file php :
// Display variations dropdowns on shop page for variable products
add_filter( 'woocommerce_loop_add_to_cart_link', 'njengah_display_variation_dropdown_on_shop_page' );
function njengah_display_variation_dropdown_on_shop_page() {
global $product;
if( $product->is_type( 'variable' )) {
$attribute_keys = array_keys( $product->get_attributes() );
?>
<form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->id ); ?>" data-product_variations="<?php echo htmlspecialchars( json_encode( $product->get_available_variations() ) ) ?>">
<?php do_action( 'woocommerce_before_variations_form' ); ?>
<?php if ( empty( $product->get_available_variations() ) && false !== $product->get_available_variations() ) : ?>
<p class="stock out-of-stock"><?php _e( 'This product is currently out of stock and unavailable.', 'woocommerce' ); ?></p>
<?php else : ?>
<table class="variations" cellspacing="0">
<tbody>
<?php foreach ( $product->get_variation_attributes() as $attribute_name => $options ) : ?>
<tr>
<td class="label"><label for="<?php echo sanitize_title( $attribute_name ); ?>"><?php echo wc_attribute_label( $attribute_name ); ?></label></td>
<td class="value">
<?php
$selected = isset( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ? wc_clean( urldecode( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ) : $product->get_variation_default_attribute( $attribute_name );
wc_dropdown_variation_attribute_options( array( 'options' => $options, 'attribute' => $attribute_name, 'product' => $product, 'selected' => $selected ) );
echo end( $attribute_keys ) === $attribute_name ? apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . __( 'Clear', 'woocommerce' ) . '</a>' ) : '';
?>
</td>
</tr>
<?php endforeach;?>
</tbody>
</table>
<?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>
<div class="single_variation_wrap">
<?php
/**
* woocommerce_before_single_variation Hook.
*/
do_action( 'woocommerce_before_single_variation' );
/**
* woocommerce_single_variation hook. Used to output the cart button and placeholder for variation data.
* @since 2.4.0
* @hooked woocommerce_single_variation - 10 Empty div for variation data.
* @hooked woocommerce_single_variation_add_to_cart_button - 20 Qty and cart button.
*/
do_action( 'woocommerce_single_variation' );
/**
* woocommerce_after_single_variation Hook.
*/
do_action( 'woocommerce_after_single_variation' );
?>
</div>
<?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
<?php endif; ?>
<?php do_action( 'woocommerce_after_variations_form' ); ?>
</form>
<?php } else {
echo sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->id ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : 'button' ),
esc_html( $product->add_to_cart_text() )
);
}
}
- Questo è il risultato:
Avvolgendo
A questo punto, dovresti essere in grado di visualizzare le variazioni a discesa nella pagina del negozio. Tuttavia, se non hai familiarità con la codifica, ti consigliamo di utilizzare un plug-in come YITH WooCommerce Color and Label Variations (versione Premium) o WooCommerce Variation Master (versione Premium).
Se hai bisogno di ulteriore lavoro personalizzato sulla pagina del negozio, non esitare a contattarci. Ci auguriamo che questo post ti abbia aiutato a trovare una soluzione al tuo problema.
Articoli simili
- Come aggiungere il pulsante Visualizza carrello in WooCommerce
- Come modificare il titolo della pagina del negozio in WooCommerce
- Come eliminare tutti i prodotti da WooCommerce
- Come aggiungere la ricerca alla pagina del negozio in WooCommerce
- Come aggiungere prodotti di affiliazione Amazon a WooCommerce
- Come caricare l'immagine sulla pagina del prodotto in WooCommerce
- Come rimuovere la categoria non categorizzata in WordPress WooCommerce
- WooCommerce crea una pagina di prodotto singolo personalizzata
- Come aggiungere un modulo di contatto con Elementor e plug-in per moduli di contatto
- Come migrare da Shopify a WooCommerce
- Come personalizzare le pagine dei prodotti WooCommerce con Elementor Pro
- Come integrare MailChimp con WooCommerce
- Come accedere all'amministratore di WooCommerce
- Come aggiungere campi di prodotti personalizzati WooCommerce
- Come esportare prodotti in WooCommerce
- Come nascondere la categoria dalla pagina del negozio WooCommerce
- Come eseguire il backup del database di WooCommerce
- Come ottenere il marchio del prodotto in WooCommerce