Add rich text description to woo product sync to meta

assets/css/admin/facebook-for-woocommerce-products-admin.css

@@ -18,6 +18,36 @@
 	padding-bottom: 0;
 }
 
+
+/* Ensure proper spacing between fields */
+#facebook_options .options_group {
+    padding: 0;
+    border-top: 1px solid #fff;
+    border-bottom: 1px solid #eee;
+}
+
+
+.woocommerce_variable_attributes .wp-editor-wrap label {
+    float: left;
+    width: 150px;
+    padding: 0;
+    color: #666;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 24px;
+}
+
+/* Ensure editor area has proper height */
+.wp-editor-area {
+    min-height: 100px;
+	color: #000000
+}
+
+/* Match WooCommerce field hover states */
+#facebook_options .wp-editor-container:hover {
+    border-color: #666;
+}
+
 /* add padding-top for first radio button in variation fields */
 #woocommerce-product-data .woocommerce_variation .fb-product-image-source-field .wc-radios li:first-child {
 	padding-top: 10px;
@@ -80,3 +110,28 @@
 .column-facebook_sync {
 	width: 11% !important;
 }
+
+.woocommerce_options_panel .wp-editor-container {
+    margin-left: 162px;
+    width: calc(100% - 182px);
+    max-width: 550px;
+}
+
+.woocommerce_options_panel .wp-editor-tabs {
+    margin-left: 162px;
+    max-width: 550px;
+}
+
+/* Ensure the label aligns properly */
+.woocommerce_options_panel label[for="fb_product_description"] {
+    float: left;
+    width: 150px;
+    padding: 0;
+    margin: 0 0 0 12px;
+}
+
+/* Ensure the wp-editor-wrap takes full width */
+.wp-editor-wrap {
+    width: 100%;
+    max-width: 100%;
+}

facebook-commerce.php

@@ -135,7 +135,7 @@ class WC_Facebookcommerce_Integration extends WC_Integration {
 	public const FB_PRODUCT_GROUP_ID    = 'fb_product_group_id';
 	public const FB_PRODUCT_ITEM_ID     = 'fb_product_item_id';
 	public const FB_PRODUCT_DESCRIPTION = 'fb_product_description';
-
+	public const FB_RICH_TEXT_DESCRIPTION = 'fb_rich_text_description';
 	/** @var string the API flag to set a product as visible in the Facebook shop */
 	public const FB_SHOP_PRODUCT_VISIBLE = 'published';
 
@@ -868,8 +868,9 @@ private function save_product_settings( WC_Product $product ) {
 		// phpcs:disable WordPress.Security.NonceVerification.Missing
 		if ( isset( $_POST[ self::FB_PRODUCT_DESCRIPTION ] ) ) {
 			$woo_product->set_description( sanitize_text_field( wp_unslash( $_POST[ self::FB_PRODUCT_DESCRIPTION ] ) ) );
+			$woo_product->set_rich_text_description( $_POST[ self::FB_PRODUCT_DESCRIPTION ] );
 		}
-
+		
 		if ( isset( $_POST[ WC_Facebook_Product::FB_PRODUCT_PRICE ] ) ) {
 			$woo_product->set_price( sanitize_text_field( wp_unslash( $_POST[ WC_Facebook_Product::FB_PRODUCT_PRICE ] ) ) );
 		}

includes/Admin.php

@@ -1181,7 +1181,7 @@ public function add_product_settings_tab_content() {
 		$is_visible   = ( $visibility = get_post_meta( $post->ID, Products::VISIBILITY_META_KEY, true ) ) ? wc_string_to_bool( $visibility ) : true;
 		$product 	  = wc_get_product( $post );
 
-		$description  = get_post_meta( $post->ID, \WC_Facebookcommerce_Integration::FB_PRODUCT_DESCRIPTION, true );
+		$rich_text_description  = get_post_meta( $post->ID, \WC_Facebookcommerce_Integration::FB_RICH_TEXT_DESCRIPTION, true );
 		$price        = get_post_meta( $post->ID, \WC_Facebook_Product::FB_PRODUCT_PRICE, true );
 		$image_source = get_post_meta( $post->ID, Products::PRODUCT_IMAGE_SOURCE_META_KEY, true );
 		$image        = get_post_meta( $post->ID, \WC_Facebook_Product::FB_PRODUCT_IMAGE, true );
@@ -1215,18 +1215,26 @@ public function add_product_settings_tab_content() {
 					)
 				);
 
-				woocommerce_wp_textarea_input(
+				echo '<div class="wp-editor-wrap">';
+				echo '<label for="' . esc_attr(\WC_Facebookcommerce_Integration::FB_PRODUCT_DESCRIPTION) . '">' . 
+					 esc_html__( 'Facebook Description', 'facebook-for-woocommerce' ) . 
+					 '</label>';
+				wp_editor(
+					$rich_text_description,
+					\WC_Facebookcommerce_Integration::FB_PRODUCT_DESCRIPTION,
 					array(
-						'id'          => \WC_Facebookcommerce_Integration::FB_PRODUCT_DESCRIPTION,
-						'label'       => __( 'Facebook Description', 'facebook-for-woocommerce' ),
-						'desc_tip'    => true,
-						'description' => __( 'Custom (plain-text only) description for product on Facebook. If blank, product description will be used. If product description is blank, shortname will be used.', 'facebook-for-woocommerce' ),
-						'cols'        => 40,
-						'rows'        => 20,
-						'value'       => $description,
-						'class'       => 'short enable-if-sync-enabled',
+						'id'      => 'wc_facebook_sync_mode',
+						'textarea_name' => \WC_Facebookcommerce_Integration::FB_PRODUCT_DESCRIPTION,
+						'textarea_rows' => 10,
+						'media_buttons' => true,
+						'teeny'        => true,
+						'quicktags'    => false,
+						'tinymce'      => array(
+							'toolbar1' => 'bold,italic,bullist,spellchecker,fullscreen',
+						),
 					)
 				);
+				echo '</div>';
 
 				woocommerce_wp_radio(
 					array(
@@ -1348,8 +1356,7 @@ public function add_product_variation_edit_fields( $index, $variation_data, $pos
 
 		$sync_enabled = 'no' !== $this->get_product_variation_meta( $variation, Products::SYNC_ENABLED_META_KEY, $parent );
 		$is_visible   = ( $visibility = $this->get_product_variation_meta( $variation, Products::VISIBILITY_META_KEY, $parent ) ) ? wc_string_to_bool( $visibility ) : true;
-
-		$description  = $this->get_product_variation_meta( $variation, \WC_Facebookcommerce_Integration::FB_PRODUCT_DESCRIPTION, $parent );
+		$description  = $this->get_product_variation_meta( $variation, \WC_Facebookcommerce_Integration::FB_PRODUCT_DESCRIPTION, $parent );		
 		$price        = $this->get_product_variation_meta( $variation, \WC_Facebook_Product::FB_PRODUCT_PRICE, $parent );
 		$image_url    = $this->get_product_variation_meta( $variation, \WC_Facebook_Product::FB_PRODUCT_IMAGE, $parent );
 		$image_source = $variation->get_meta( Products::PRODUCT_IMAGE_SOURCE_META_KEY );
@@ -1512,6 +1519,7 @@ public function save_product_variation_edit_fields( $variation_id, $index ) {
 			$posted_param = 'variable_' . \WC_Facebook_Product::FB_PRODUCT_PRICE;
 			$price        = isset( $_POST[ $posted_param ][ $index ] ) ? wc_format_decimal( wc_clean( wp_unslash( $_POST[ $posted_param ][ $index ] ) ) ) : '';
 			$variation->update_meta_data( \WC_Facebookcommerce_Integration::FB_PRODUCT_DESCRIPTION, $description );
+			$variation->update_meta_data( \WC_Facebookcommerce_Integration::FB_RICH_TEXT_DESCRIPTION, $description );
 			$variation->update_meta_data( Products::PRODUCT_IMAGE_SOURCE_META_KEY, $image_source );
 			$variation->update_meta_data( \WC_Facebook_Product::FB_MPN, $fb_mpn );
 			$variation->update_meta_data( \WC_Facebook_Product::FB_PRODUCT_IMAGE, $image_url );