WooCommerce: agregue una configuración personalizada de WordPress

Si ha tomado el curso en línea ConfigureWoo , sabrá que WooCommerce agrega su propia sección de "Personalizador de WordPress" llamada "WooCommerce", de hecho. Desde allí, puede administrar algunas configuraciones, como el aviso de la tienda, las imágenes del producto, los campos de pago, etc.

¿Qué sucede si desea agregar su propia configuración y permitir que usted o su cliente alterne las opciones o escriba valores de entrada, para que esto pueda aplicarse a su sitio web actual de WooCommerce? Bueno, eso es bastante factible, así que en esta publicación veremos cómo lo hacen. ¡Disfrutar!

Si vas a Panel de WordPress > Apariencia > Personalizar, verás el "Personalizador de WordPress". De forma predeterminada, el complemento WooCommerce agrega su propia sección "WooCommerce" al Personalizador, y desde allí puede administrar algunas configuraciones.

Fragmento de PHP: agregue una configuración personalizada de WooCommerce del personalizador de WordPress

En este ejemplo, agregaremos una casilla de verificación a la sección existente del Personalizador de WordPress "WooCommerce" > "Pagar", que cambiará entre el diseño de pago de 2 columnas (predeterminado para algunos temas de WooCommerce como Storefront, 2021, etc.) y uno diseño de columna de pago (ya es el comportamiento normal para los móviles, por lo que la facturación es seguida por el envío y finalmente por la revisión del pedido, pero queremos obtener lo mismo aquí también en las computadoras de escritorio).

Como puede ver dentro del fragmento, hay 3 partes:

  1. add_setting (): esta función de WordPress crea la opción
  2. add_control (): esta función de WordPress controla la opción, le dice a WP que es una casilla de verificación y en qué sección debe mostrarse (woocommerce_checkout en el ejemplo a continuación)
  3. CSS condicional: este es CSS que solo se activa si la opción está habilitada (casilla de verificación marcada en este caso)
/**
 * @snippet       WordPress Customizer Setting - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 4.6
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_action( 'customize_register', 'bbloomer_woocommerce_wordpress_customizer_css_option' );
 
function bbloomer_woocommerce_wordpress_customizer_css_option( $wp_customize ) {
   $wp_customize->add_setting( 'woocommerce_checkout_switch_col_layout', array(
      'default' => 'no',
      'type' => 'option',
      'capability' => 'manage_woocommerce',
      'sanitize_callback' => 'wc_bool_to_string',
      'sanitize_js_callback' => 'wc_string_to_bool',
   ));
   $wp_customize->add_control( 'woocommerce_checkout_switch_col_layout', array(
      'label' => 'Switch layout',
      'description' => 'Optionally switch to a 1-column checkout on desktops',
      'section' => 'woocommerce_checkout',
      'settings' => 'woocommerce_checkout_switch_col_layout',
      'type' => 'checkbox',
   ));
}
 
add_action( 'wp_head', 'bbloomer_switch_checkout_cols_css' );
 
function bbloomer_switch_checkout_cols_css() {
   if ( true === wc_string_to_bool( get_option( 'woocommerce_checkout_switch_col_layout', 'yes' ) ) ) {
   ?>
   <style type="text/css">
      .woocommerce-checkout form .col2-set, .woocommerce-checkout form #order_review, .woocommerce-checkout form #order_review_heading {
         width: 100%;
         float: none;
         clear: none;
         padding-left: 0;
         padding-right: 0;
      }
   </style>
   <?php
   }
}

Capturas de pantalla antes y después

Antes: en el escritorio, mi tema muestra un pago de 2 columnas.
Después: una vez que mi configuración personalizada (una casilla de verificación) está marcada, mi diseño de pago en el escritorio pasa a 1 columna.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir