WooCommerce: aplique CSS a un solo producto
Tema interesante. Un cliente mío me pidió que eliminara la imagen de una sola página de producto, pero no de TODAS las páginas de producto. La misma historia se aplica si desea aplicar cambios de CSS a cualquier página específica de WooCommerce. Así es como lo hice.
1. Acceda a su sitio web y vaya a la página o página del producto que desea "CSS-ify"
Si está en Google Chrome, haga clic con el botón derecho del mouse y haga clic en "inspeccionar". Si estás en Firefox, usa Firebug. En ambos casos, puede ver el código fuente HTML de la página e identificar la clase ID de PÁGINA de la etiqueta HTML del cuerpo :
En este caso, encontramos un identificador único de un producto llamado “ postid-745 ”. Lo mismo se aplica en cualquier página de WooCommerce: al mirar el código fuente, debería poder encontrar un identificador único como " page-id-9 ".
2. Usa el identificador único en tu CSS
Por ejemplo, si desea eliminar la imagen en una de las páginas de su producto y hacer que su descripción cubra toda la página, simplemente use su identificador como prefijo:
/** * @snippet Apply CSS changes to one WooCommerce page/product only * @how-to Get CustomizeWoo.com FREE * @author Rodolfo Melogli * @testedwith WooCommerce 5.0 * @donate $9 https://businessbloomer.com/bloomer-armada/ *//* removes the image on product id = 53 */.postid-53 div.images { display:none;}/* stretches the product description on full width */.postid-53 div.summary { width: 98%; float: none;} |
Deja una respuesta