{"id":7662,"date":"2023-08-11T16:22:18","date_gmt":"2023-08-11T23:22:18","guid":{"rendered":"https:\/\/membermouse.com\/?post_type=ht_kb&p=7662"},"modified":"2023-08-11T16:22:18","modified_gmt":"2023-08-11T23:22:18","slug":"mostrar-opciones-de-precios-mediante-tablas-en-su-pagina-de-ventas","status":"publish","type":"ht_kb","link":"https:\/\/membermouse.com\/es\/docs\/mostrar-opciones-de-precios-mediante-tablas-en-su-pagina-de-ventas\/","title":{"rendered":"Mostrar opciones de precios mediante tablas en su p\u00e1gina de ventas"},"content":{"rendered":"

Sus afiliados quieren opciones, pero no demasiadas. Este art\u00edculo proporciona un ejemplo de c\u00f3mo puede ofrecer a sus miembros 3 opciones diferentes en una p\u00e1gina de ventas utilizando una combinaci\u00f3n de CSS y HTML. Este ejemplo asume que usted tiene una comprensi\u00f3n b\u00e1sica de HTML y CSS.<\/p>\n

Tenga en cuenta que este ejemplo se proporciona como punto de partida. Puede ser copiado y pegado en sus p\u00e1ginas, y entonces usted puede cambiar los enlaces href para reflejar sus SmartTags de enlace de compra, y los atributos de estilo en las diferentes secciones para ajustar la apariencia. Al final de este art\u00edculo, encontrar\u00e1 el CSS y el HTML en archivos separados por si usted y\/o su desarrollador desean editar estas diferentes \u00e1reas de forma m\u00e1s exhaustiva.<\/p>\n

Para crear tablas de precios en su p\u00e1gina, simplemente copie y pegue el siguiente c\u00f3digo en un bloque HTML, o dentro de la vista \"Texto\" del editor si utiliza el antiguo editor de WordPress:<\/p>\n

\n
\n
<<\/span>estilo><\/span><\/span>\n@media<\/span> s\u00f3lo pantalla y (<\/span>max-width<\/span>:<\/span> 600px)<\/span><\/span> {<\/span>\n  .columnas<\/span> {<\/span>\n    anchura<\/span>:<\/span> 100%;<\/span>\n  }<\/span>\n}<\/span>\n<\/span><\/span><\/<\/span>estilo><\/span><\/span>\n<<\/span>div clase<\/span>=<\/span>\"<\/span>columnas\"<\/span><\/span> estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> float<\/span>:<\/span> izquierda;<\/span> anchura<\/span>:<\/span> 33.3%;<\/span> acolchado<\/span>:<\/span> 8px;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>\n\t<<\/span>ul clase<\/span>=<\/span>\"<\/span>precio\"<\/span><\/span> estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> list-style-type<\/span>:<\/span> ninguno;<\/span> frontera<\/span>:<\/span> 1px s\u00f3lido #eee;<\/span> margen<\/span>:<\/span> 0;<\/span> acolchado<\/span>:<\/span> 0;<\/span> -webkit-transici\u00f3n<\/span>:<\/span> 0.3s;<\/span> transici\u00f3n<\/span>:<\/span> 0.3s;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>\n\t\t<<\/span>li clase<\/span>=<\/span>\"<\/span>cabecera\"<\/span><\/span> estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> borde inferior<\/span>:<\/span> 1px s\u00f3lido #eee;<\/span> acolchado<\/span>:<\/span> 20px;<\/span> alinear texto<\/span>:<\/span> centro;<\/span> color de fondo<\/span>:<\/span> #358E39;<\/span> color<\/span>:<\/span> blanco;<\/span> tama\u00f1o de fuente<\/span>:<\/span> 25px;<\/span> sombra de texto<\/span>:<\/span> 0 1px 1px rgba<\/span>(<\/span>0,<\/span>0,<\/span>0,<\/span>0.4)<\/span>;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>Producto 1<\/<\/span>li><\/span><\/span>\n\t\t<<\/span>li clase<\/span>=<\/span>\"<\/span>gris\"<\/span><\/span> estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> borde inferior<\/span>:<\/span> 1px s\u00f3lido #eee;<\/span> acolchado<\/span>:<\/span> 20px;<\/span> alinear texto<\/span>:<\/span> centro;<\/span> color de fondo<\/span>:<\/span> #eee;<\/span> tama\u00f1o de fuente<\/span>:<\/span> 20px;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>$ 9,99 \/ a\u00f1o<\/<\/span>li><\/span><\/span>\n\t\t<<\/span>li estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> borde inferior<\/span>:<\/span> 1px s\u00f3lido #eee;<\/span> acolchado<\/span>:<\/span> 20px;<\/span> alinear texto<\/span>:<\/span> centro;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>10 v\u00eddeos<\/<\/span>li><\/span><\/span>\n\t\t<<\/span>li estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> borde inferior<\/span>:<\/span> 1px s\u00f3lido #eee;<\/span> acolchado<\/span>:<\/span> 20px;<\/span> alinear texto<\/span>:<\/span> centro;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>Ventajas incre\u00edbles<\/<\/span>li><\/span><\/span>\n\t\t<<\/span>li estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> borde inferior<\/span>:<\/span> 1px s\u00f3lido #eee;<\/span> acolchado<\/span>:<\/span> 20px;<\/span> alinear texto<\/span>:<\/span> centro;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>Correos electr\u00f3nicos mensuales<\/<\/span>li><\/span><\/span>\n\t\t<<\/span>li estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> borde inferior<\/span>:<\/span> 1px s\u00f3lido #eee;<\/span> acolchado<\/span>:<\/span> 20px;<\/span> alinear texto<\/span>:<\/span> centro;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>Acceso limitado<\/<\/span>li><\/span><\/span>\n\t\t<<\/span>li clase<\/span>=<\/span>\"<\/span>gris\"<\/span><\/span> estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> borde inferior<\/span>:<\/span> 1px s\u00f3lido #eee;<\/span> acolchado<\/span>:<\/span> 20px;<\/span> alinear texto<\/span>:<\/span> centro;<\/span> color de fondo<\/span>:<\/span> #eee;<\/span> tama\u00f1o de fuente<\/span>:<\/span> 20px;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>\n\t\t\t<<\/span>a href<\/span>=<\/span>\"<\/span>https:\/\/membermouse.com\/es\/checkout\/?rid=pK2qyz\"<\/span><\/span> clase<\/span>=<\/span>\"<\/span>bot\u00f3n\"<\/span><\/span> estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> color de fondo<\/span>:<\/span> #4CAF50;<\/span> frontera<\/span>:<\/span> ninguno;<\/span> color<\/span>:<\/span> blanco;<\/span> acolchado<\/span>:<\/span> 10px 25px;<\/span> alinear texto<\/span>:<\/span> centro;<\/span> decoraci\u00f3n de texto<\/span>:<\/span> ninguno;<\/span> tama\u00f1o de fuente<\/span>:<\/span> 18px;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>Inscribirse<\/<\/span>a><\/span><\/span>\n\t\t<\/<\/span>li><\/span><\/span>\n\t<\/<\/span>ul><\/span><\/span>\n<\/<\/span>div><\/span><\/span>\n<<\/span>div clase<\/span>=<\/span>\"<\/span>columnas\"<\/span><\/span> estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> float<\/span>:<\/span> izquierda;<\/span> anchura<\/span>:<\/span> 33.3%;<\/span> acolchado<\/span>:<\/span> 8px;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>\n\t<<\/span>ul clase<\/span>=<\/span>\"<\/span>precio2\"<\/span><\/span> estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> list-style-type<\/span>:<\/span> ninguno;<\/span> frontera<\/span>:<\/span> 1px s\u00f3lido #eee;<\/span> margen<\/span>:<\/span> 0;<\/span> acolchado<\/span>:<\/span> 0;<\/span> -webkit-transici\u00f3n<\/span>:<\/span> 0.3s;<\/span> transici\u00f3n<\/span>:<\/span> 0.3s;<\/span> box-shadow<\/span>:<\/span> 0 8px 12px 0 rgba<\/span>(<\/span>0,<\/span>0,<\/span>0,<\/span>0.2)<\/span>;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>\n\t\t<<\/span>li clase<\/span>=<\/span>\"<\/span>cabecera\"<\/span><\/span> estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> borde inferior<\/span>:<\/span> 1px s\u00f3lido #eee;<\/span> acolchado<\/span>:<\/span> 20px;<\/span> alinear texto<\/span>:<\/span> centro;<\/span> color<\/span>:<\/span> blanco;<\/span> tama\u00f1o de fuente<\/span>:<\/span> 25px;<\/span> sombra de texto<\/span>:<\/span> 0 1px 1px rgba<\/span>(<\/span>0,<\/span>0,<\/span>0,<\/span>0.4)<\/span>;<\/span> color de fondo<\/span>:<\/span> #4CAF50;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>Producto 2<\/<\/span>li><\/span><\/span>\n\t\t<<\/span>li clase<\/span>=<\/span>\"<\/span>gris\"<\/span><\/span> estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> borde inferior<\/span>:<\/span> 1px s\u00f3lido #eee;<\/span> acolchado<\/span>:<\/span> 20px;<\/span> alinear texto<\/span>:<\/span> centro;<\/span> color de fondo<\/span>:<\/span> #eee;<\/span> tama\u00f1o de fuente<\/span>:<\/span> 20px;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>$ 24,99 \/ a\u00f1o<\/<\/span>li><\/span><\/span>\n\t\t<<\/span>li estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> borde inferior<\/span>:<\/span> 1px s\u00f3lido #eee;<\/span> acolchado<\/span>:<\/span> 20px;<\/span> alinear texto<\/span>:<\/span> centro;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>25 V\u00eddeos<\/<\/span>li><\/span><\/span>\n\t\t<<\/span>li estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> borde inferior<\/span>:<\/span> 1px s\u00f3lido #eee;<\/span> acolchado<\/span>:<\/span> 20px;<\/span> alinear texto<\/span>:<\/span> centro;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>A\u00fan m\u00e1s ventajas<\/<\/span>li><\/span><\/span>\n\t\t<<\/span>li estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> borde inferior<\/span>:<\/span> 1px s\u00f3lido #eee;<\/span> acolchado<\/span>:<\/span> 20px;<\/span> alinear texto<\/span>:<\/span> centro;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>Correos electr\u00f3nicos quincenales<\/<\/span>li><\/span><\/span>\n\t\t<<\/span>li estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> borde inferior<\/span>:<\/span> 1px s\u00f3lido #eee;<\/span> acolchado<\/span>:<\/span> 20px;<\/span> alinear texto<\/span>:<\/span> centro;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>Acceso ampliado<\/<\/span>li><\/span><\/span>\n\t\t<<\/span>li clase<\/span>=<\/span>\"<\/span>gris\"<\/span><\/span> estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> borde inferior<\/span>:<\/span> 1px s\u00f3lido #eee;<\/span> acolchado<\/span>:<\/span> 20px;<\/span> alinear texto<\/span>:<\/span> centro;<\/span> color de fondo<\/span>:<\/span> #eee;<\/span> tama\u00f1o de fuente<\/span>:<\/span> 20px;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>\n\t\t\t<<\/span>a href<\/span>=<\/span>\"<\/span>https:\/\/membermouse.com\/es\/checkout\/?rid=p57LaD\"<\/span><\/span> clase<\/span>=<\/span>\"<\/span>bot\u00f3n\"<\/span><\/span> estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> color de fondo<\/span>:<\/span> #4CAF50;<\/span> frontera<\/span>:<\/span> ninguno;<\/span> color<\/span>:<\/span> blanco;<\/span> acolchado<\/span>:<\/span> 10px 25px;<\/span> alinear texto<\/span>:<\/span> centro;<\/span> decoraci\u00f3n de texto<\/span>:<\/span> ninguno;<\/span> tama\u00f1o de fuente<\/span>:<\/span> 18px;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>Inscribirse<\/<\/span>a><\/span><\/span>\n\t\t<\/<\/span>li><\/span><\/span>\n\t<\/<\/span>ul><\/span><\/span>\n<\/<\/span>div><\/span><\/span>\n<<\/span>div clase<\/span>=<\/span>\"<\/span>columnas\"<\/span><\/span> estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> float<\/span>:<\/span> izquierda;<\/span> anchura<\/span>:<\/span> 33.3%;<\/span> acolchado<\/span>:<\/span> 8px;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>\n\t<<\/span>ul clase<\/span>=<\/span>\"<\/span>precio\"<\/span><\/span> estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> list-style-type<\/span>:<\/span> ninguno;<\/span> frontera<\/span>:<\/span> 1px s\u00f3lido #eee;<\/span> margen<\/span>:<\/span> 0;<\/span> acolchado<\/span>:<\/span> 0;<\/span> -webkit-transici\u00f3n<\/span>:<\/span> 0.3s;<\/span> transici\u00f3n<\/span>:<\/span> 0.3s;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>\n\t\t<<\/span>li clase<\/span>=<\/span>\"<\/span>cabecera\"<\/span><\/span> estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> borde inferior<\/span>:<\/span> 1px s\u00f3lido #eee;<\/span> acolchado<\/span>:<\/span> 20px;<\/span> alinear texto<\/span>:<\/span> centro;<\/span> color de fondo<\/span>:<\/span> #358E39;<\/span> color<\/span>:<\/span> blanco;<\/span> tama\u00f1o de fuente<\/span>:<\/span> 25px;<\/span> sombra de texto<\/span>:<\/span> 0 1px 1px rgba<\/span>(<\/span>0,<\/span>0,<\/span>0,<\/span>0.4)<\/span>;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>Producto 3<\/<\/span>li><\/span><\/span>\n\t\t<<\/span>li clase<\/span>=<\/span>\"<\/span>gris\"<\/span><\/span> estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> borde inferior<\/span>:<\/span> 1px s\u00f3lido #eee;<\/span> acolchado<\/span>:<\/span> 20px;<\/span> alinear texto<\/span>:<\/span> centro;<\/span> color de fondo<\/span>:<\/span> #eee;<\/span> tama\u00f1o de fuente<\/span>:<\/span> 20px;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>$ 49,99 \/ a\u00f1o<\/<\/span>li><\/span><\/span>\n\t\t<<\/span>li estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> borde inferior<\/span>:<\/span> 1px s\u00f3lido #eee;<\/span> acolchado<\/span>:<\/span> 20px;<\/span> alinear texto<\/span>:<\/span> centro;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>50 V\u00eddeos<\/<\/span>li><\/span><\/span>\n\t\t<<\/span>li estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> borde inferior<\/span>:<\/span> 1px s\u00f3lido #eee;<\/span> acolchado<\/span>:<\/span> 20px;<\/span> alinear texto<\/span>:<\/span> centro;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>M\u00e1s ventajas<\/<\/span>li><\/span><\/span>\n\t\t<<\/span>li estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> borde inferior<\/span>:<\/span> 1px s\u00f3lido #eee;<\/span> acolchado<\/span>:<\/span> 20px;<\/span> alinear texto<\/span>:<\/span> centro;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>Correos electr\u00f3nicos semanales<\/<\/span>li><\/span><\/span>\n\t\t<<\/span>li estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> borde inferior<\/span>:<\/span> 1px s\u00f3lido #eee;<\/span> acolchado<\/span>:<\/span> 20px;<\/span> alinear texto<\/span>:<\/span> centro;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>El mayor acceso<\/<\/span>li><\/span><\/span>\n\t\t<<\/span>li clase<\/span>=<\/span>\"<\/span>gris\"<\/span><\/span> estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> borde inferior<\/span>:<\/span> 1px s\u00f3lido #eee;<\/span> acolchado<\/span>:<\/span> 20px;<\/span> alinear texto<\/span>:<\/span> centro;<\/span> color de fondo<\/span>:<\/span> #eee;<\/span> tama\u00f1o de fuente<\/span>:<\/span> 20px;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>\n\t\t\t<<\/span>a href<\/span>=<\/span>\"<\/span>https:\/\/membermouse.com\/es\/checkout\/?rid=pGpM60\"<\/span><\/span> clase<\/span>=<\/span>\"<\/span>bot\u00f3n\"<\/span><\/span> estilo<\/span>=\"<\/span>box-sizing<\/span>:<\/span> border-box;<\/span> color de fondo<\/span>:<\/span> #4CAF50;<\/span> frontera<\/span>:<\/span> ninguno;<\/span> color<\/span>:<\/span> blanco;<\/span> acolchado<\/span>:<\/span> 10px 25px;<\/span> alinear texto<\/span>:<\/span> centro;<\/span> decoraci\u00f3n de texto<\/span>:<\/span> ninguno;<\/span> tama\u00f1o de fuente<\/span>:<\/span> 18px;<\/span><\/span>\"<\/span><\/span>><\/span><\/span>Inscribirse<\/<\/span>a><\/span><\/span>\n\t\t<\/<\/span>li><\/span><\/span>\n\t<\/<\/span>ul><\/span><\/span>\n<\/<\/span>div><\/span><\/span> <\/code><\/pre>\n
\n
HTML<\/div>\n<\/div>\n<\/div>\n
\nEste es el aspecto del c\u00f3digo anterior cuando se utiliza:<\/strong><\/p>\n

\nPuede utilizar los documentos adjuntos para ver el HTML y el CSS en archivos separados. Esto le permite realizar r\u00e1pidamente ediciones y cambios seg\u00fan sea necesario.<\/h3>\n<\/div>","protected":false},"excerpt":{"rendered":"
Sus socios quieren opciones, pero no demasiadas. Este art\u00edculo proporciona un ejemplo de c\u00f3mo puede ofrecer a sus miembros 3 opciones diferentes en una p\u00e1gina de ventas utilizando una combinaci\u00f3n...<\/p>","protected":false},"author":9645,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_strive_editorial_status":"not-started","_strive_copy_of":0,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"ht-kb-category":[],"ht-kb-tag":[],"class_list":["post-7662","ht_kb","type-ht_kb","status-publish","format-standard","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/ht-kb\/7662","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/users\/9645"}],"replies":[{"embeddable":true,"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/comments?post=7662"}],"version-history":[{"count":0,"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/ht-kb\/7662\/revisions"}],"wp:attachment":[{"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/media?parent=7662"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/ht-kb-category?post=7662"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/ht-kb-tag?post=7662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}