Como mostrar o menu suspenso de variações suspensas na página da loja WooCommerce
Publicados: 2021-07-19
Você está procurando uma maneira de exibir as variações suspensas na página da loja WooCommerce? Neste post, compartilharemos uma solução simples para você. No entanto, usaremos um código personalizado, e isso significa que você precisa ter alguma experiência em codificação para implementar essa solução.
A maioria das lojas de comércio eletrônico tem muitas variações de produtos. Os clientes precisam clicar nas páginas de um único produto para ver as variações.
Se você exibir as variações do produto na página da loja, isso tornará as variações mais cativantes para os clientes. Além disso, isso permitirá que você amplie seu produto em apenas alguns cliques.
WooCommerce Mostrar menu suspenso de variações na página da loja
Ao final deste guia, você poderá exibir as variações suspensas programaticamente na página da loja. No entanto, é importante ter em mente que você precisa primeiro criar uma variação de produto na página do produto.
Antes de prosseguir, você também deve instalar ou criar um tema filho. Isso garantirá que suas alterações não sejam perdidas durante uma atualização. Além disso, você precisa fazer backup de sua conta para poder reverter para a versão anterior se cometer um erro.
Vamos direto ao assunto.
Etapas para mostrar o menu suspenso de variações da lista suspensa na página da loja
Aqui estão os passos simples que você precisa seguir:
- Faça login no seu site WordPress e acesse o Dashboard como usuário administrador.
- No menu Dashboard, clique em Appearance Menu > Theme Editor Menu . Quando a página Theme Editor for aberta, procure o arquivo de funções do tema para adicionar a função para exibir as variações suspensas na página da loja.
- Adicione o seguinte código ao arquivo 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() )
);
}
}
- Este é o resultado:
Empacotando
Até agora, você deve poder exibir as variações suspensas na página da loja. No entanto, se você não estiver familiarizado com a codificação, recomendamos usar um plug-in como YITH WooCommerce Color and Label Variations (Versão Premium) ou WooCommerce Variation Master (Versão Premium).
Se você precisar de trabalho personalizado adicional na página da loja, sinta-se à vontade para entrar em contato conosco. Esperamos que este post tenha ajudado você a encontrar uma solução para o seu problema.
Artigos semelhantes
- Como adicionar o botão Visualizar carrinho no WooCommerce
- Como alterar o título da página da loja no WooCommerce
- Como excluir todos os produtos do WooCommerce
- Como adicionar pesquisa à página de compras no WooCommerce
- Como adicionar produtos afiliados da Amazon ao WooCommerce
- Como fazer upload de imagem na página do produto no WooCommerce
- Como remover categoria sem categoria no WordPress WooCommerce
- WooCommerce Criar página de produto único personalizado
- Como adicionar formulário de contato com plug-ins Elementor e formulário de contato
- Como migrar do Shopify para o WooCommerce
- Como personalizar páginas de produtos WooCommerce com o Elementor Pro
- Como integrar o MailChimp com o WooCommerce
- Como fazer login no administrador do WooCommerce
- Como adicionar campos de produtos personalizados WooCommerce
- Como exportar produtos no WooCommerce
- Como ocultar a categoria da página da loja WooCommerce
- Como fazer backup do banco de dados WooCommerce
- Como obter o nome da marca do produto no WooCommerce