Fix variation selector display issues on the front end (#51023)

* Add woocommerce class to single-product

* Add changelog

* Fix chevron alignment

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 (
 		<div { ...blockProps }>

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

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 {