From 3def18623e9b2a8df170000f6f3dbfb07b8caab7 Mon Sep 17 00:00:00 2001 From: Fernando Marichal Date: Fri, 30 Aug 2024 17:47:20 -0300 Subject: [PATCH] Fix variation selector display issues on the front end (#51023) * Add woocommerce class to single-product * Add changelog * Fix chevron alignment --- .../assets/js/blocks/single-product/save.tsx | 4 +++- .../changelog/fix-47794_variation_selector_display | 4 ++++ .../woocommerce/client/legacy/css/woocommerce.scss | 12 ++++++++++++ 3 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 plugins/woocommerce/changelog/fix-47794_variation_selector_display diff --git a/plugins/woocommerce-blocks/assets/js/blocks/single-product/save.tsx b/plugins/woocommerce-blocks/assets/js/blocks/single-product/save.tsx index 0feb6d8f950..4c8f4ef2973 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/single-product/save.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/single-product/save.tsx @@ -4,7 +4,9 @@ import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; const Save = () => { - const blockProps = useBlockProps.save(); + const blockProps = useBlockProps.save( { + className: 'woocommerce', + } ); return (
diff --git a/plugins/woocommerce/changelog/fix-47794_variation_selector_display b/plugins/woocommerce/changelog/fix-47794_variation_selector_display new file mode 100644 index 00000000000..84ebab4b1c5 --- /dev/null +++ b/plugins/woocommerce/changelog/fix-47794_variation_selector_display @@ -0,0 +1,4 @@ +Significance: minor +Type: fix + +Fix variation selector display issues on the front end #51023 diff --git a/plugins/woocommerce/client/legacy/css/woocommerce.scss b/plugins/woocommerce/client/legacy/css/woocommerce.scss index efd786f4d58..8c97759bf97 100644 --- a/plugins/woocommerce/client/legacy/css/woocommerce.scss +++ b/plugins/woocommerce/client/legacy/css/woocommerce.scss @@ -445,6 +445,18 @@ p.demo_store, min-width: 75%; display: inline-block; margin-right: 1em; + + /* We hide the default chevron because it cannot be directly modified. Instead, we add a custom chevron using a background image. */ + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + padding-right: 2em; + background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=) + no-repeat; + background-size: 16px; + -webkit-background-size: 16px; + background-position: calc(100% - 12px) 50%; + -webkit-background-position: calc(100% - 12px) 50%; } td.label {