WooCommerce agrega su propia sección «WordPress Customizer» 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é pasa si desea agregar su propia configuración y dejar que sus opciones de entrada o su cliente escriban 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!
Php Snippet: agregue una configuración personalizada de WordPress Customizer WooCommerce
En este ejemplo, agregaremos una casilla de verificación a la sección existente «WooCommerce»> «Checkout» de WordPress Customizer, que cambiará entre Diseño de pago de 2 columnas (predeterminado para algunos temas de WooCommerce como Storefront, 2021, etc.) y un Diseño de pago de 1 columna (Ya es el comportamiento normal para los móviles, por lo que la facturación es seguida por el envío y finalmente por revisión del pedido, pero queremos que también obtenga lo mismo en los escritorios).
Como puede ver dentro del fragmento, hay 3 partes:
- add_setting(): esta función de WordPress crea la opción
- add_control(): Esta función de WordPress controla la opción, le dice a WP que es una casilla de verificación y en la que debe mostrar la sección (wooCommerce_checkout en el ejemplo a continuación)
- CSS condicional: este es CSS que solo se desencadena si la opción está habilitada (casilla de verificación marcada en este caso)
/** n*@snippet WordPress Customizer Setting – WooCommerce n*@how-to https://tdestudiodesign.com/tutoriales n*@author Tomás Lucas D´Amario, TD Estudio Design n*@compatible WooCommerce 4.6 n*@community https://tdestudiodesign.com/club */ add_action( ‘customize_register’, ‘tddesign_woocommerce_wordpress_customizer_css_option’ ); function tddesign_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’, ‘tddesign_switch_checkout_cols_css’ ); function tddesign_switch_checkout_cols_css() { if ( true === wc_string_to_bool( get_option( ‘woocommerce_checkout_switch_col_layout’, ‘yes’ ) ) ) { ?>
Capas de pantalla antes y después
