Configuration label and tooltip cleanup

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

@@ -53,6 +53,11 @@
 	background-image: url( '../../images/icon-2.png' );
 }
 
+#wc-facebook-connection-box .actions {
+	display: flex;
+	align-items: center;
+}
+
 #wc-facebook-connection-box .button {
 	color: rgb( 5, 5, 5 );
 	background-color: rgb( 228, 230, 235 );

assets/css/facebook.css

@@ -310,3 +310,9 @@
 div#message:has(a[href*="facebook_messenger_deprecation_warning"]) {
 	border-left-color: #dba617 !important;
 }
+
+#mainform .actions{
+	display: flex;
+	max-width: 635px;
+	flex-direction: column;
+}

assets/js/admin/products-admin.js

@@ -639,12 +639,12 @@ jQuery( document ).ready( function( $ ) {
 			$container.find( `.show-if-product-image-source-${imageSource}` ).closest( '.form-field' ).show();
 		} );
 
-		$( '.js-fb-product-image-source:checked:visible' ).trigger( 'change' );
+		$( '.js-fb-product-image-source:checked' ).trigger( 'change' );
 
 		// trigger settings fields modifiers when variations are loaded
 		$productData.on( 'woocommerce_variations_loaded', function() {
 			$( '.js-variable-fb-sync-toggle:visible' ).trigger( 'change' );
-			$( '.js-fb-product-image-source:checked:visible' ).trigger( 'change' );
+			$( '.js-fb-product-image-source:checked' ).trigger( 'change' );
 			$( '.variable_is_virtual:visible' ).trigger( 'change' );
 		} );
 

includes/Admin.php

@@ -180,7 +180,7 @@ public function enqueue_scripts() {
 					array(
 						'i18n' => array(
 							'top_level_dropdown_placeholder' => __( 'Search main categories...', 'facebook-for-woocommerce' ),
-							'second_level_empty_dropdown_placeholder' => __( 'Choose a main category', 'facebook-for-woocommerce' ),
+							'second_level_empty_dropdown_placeholder' => __( 'Choose a main category first', 'facebook-for-woocommerce' ),
 							'general_dropdown_placeholder'   => __( 'Choose a category', 'facebook-for-woocommerce' ),
 						),
 					)
@@ -1201,13 +1201,15 @@ public function add_product_settings_tab_content() {
 				woocommerce_wp_select(
 					array(
 						'id'      => 'wc_facebook_sync_mode',
-						'label'   => __( 'Facebook sync', 'facebook-for-woocommerce' ),
+						'label'   => __( 'Facebook Sync', 'facebook-for-woocommerce' ),
 						'options' => array(
 							self::SYNC_MODE_SYNC_AND_SHOW => __( 'Sync and show in catalog', 'facebook-for-woocommerce' ),
 							self::SYNC_MODE_SYNC_AND_HIDE => __( 'Sync and hide in catalog', 'facebook-for-woocommerce' ),
 							self::SYNC_MODE_SYNC_DISABLED => __( 'Do not sync', 'facebook-for-woocommerce' ),
 						),
-						'value'   => $sync_mode,
+						'value'       => $sync_mode,
+						'desc_tip'    => true,
+						'description' => __( 'Choose whether to sync this product to Facebook and, if synced, whether it should be visible in the catalog.', 'facebook-for-woocommerce' ),
 					)
 				);
 
@@ -1229,7 +1231,7 @@ public function add_product_settings_tab_content() {
 						'id'            => 'fb_product_image_source',
 						'label'         => __( 'Facebook Product Image', 'facebook-for-woocommerce' ),
 						'desc_tip'      => true,
-						'description'   => __( 'Choose the product image that should be synced to the Facebook catalog for this product. If using a custom image, please enter an absolute URL (e.g. https://domain.com/image.jpg).', 'facebook-for-woocommerce' ),
+						'description'   => __( 'Choose the product image that should be synced to the Facebook catalog and displayed for this product.', 'facebook-for-woocommerce' ),
 						'options'       => array(
 							Products::PRODUCT_IMAGE_SOURCE_PRODUCT => __( 'Use WooCommerce image', 'facebook-for-woocommerce' ),
 							Products::PRODUCT_IMAGE_SOURCE_CUSTOM  => __( 'Use custom image', 'facebook-for-woocommerce' ),
@@ -1246,6 +1248,8 @@ public function add_product_settings_tab_content() {
 						'label' => __( 'Custom Image URL', 'facebook-for-woocommerce' ),
 						'value' => $image,
 						'class' => sprintf( 'enable-if-sync-enabled product-image-source-field show-if-product-image-source-%s', Products::PRODUCT_IMAGE_SOURCE_CUSTOM ),
+						'desc_tip'      => true,
+						'description'   => __( 'Please enter an absolute URL (e.g. https://domain.com/image.jpg).', 'facebook-for-woocommerce' ),
 					)
 				);
 
@@ -1337,13 +1341,15 @@ public function add_product_variation_edit_fields( $index, $variation_data, $pos
 			array(
 				'id'            => "variable_facebook_sync_mode$index",
 				'name'          => "variable_facebook_sync_mode[$index]",
-				'label'         => __( 'Facebook sync', 'facebook-for-woocommerce' ),
+				'label'         => __( 'Facebook Sync', 'facebook-for-woocommerce' ),
 				'options'       => array(
 					self::SYNC_MODE_SYNC_AND_SHOW => __( 'Sync and show in catalog', 'facebook-for-woocommerce' ),
 					self::SYNC_MODE_SYNC_AND_HIDE => __( 'Sync and hide in catalog', 'facebook-for-woocommerce' ),
 					self::SYNC_MODE_SYNC_DISABLED => __( 'Do not sync', 'facebook-for-woocommerce' ),
 				),
 				'value'         => $sync_mode,
+				'desc_tip'    => true,
+				'description' => __( 'Choose whether to sync this product to Facebook and, if synced, whether it should be visible in the catalog.', 'facebook-for-woocommerce' ),
 				'class'         => 'js-variable-fb-sync-toggle',
 				'wrapper_class' => 'form-row form-row-full',
 			)
@@ -1370,7 +1376,7 @@ public function add_product_variation_edit_fields( $index, $variation_data, $pos
 				'name'          => "variable_fb_product_image_source[$index]",
 				'label'         => __( 'Facebook Product Image', 'facebook-for-woocommerce' ),
 				'desc_tip'      => true,
-				'description'   => __( 'Choose the product image that should be synced to the Facebook catalog for this product. If using a custom image, please enter an absolute URL (e.g. https://domain.com/image.jpg).', 'facebook-for-woocommerce' ),
+				'description'   => __( 'Choose the product image that should be synced to the Facebook catalog and displayed for this product.', 'facebook-for-woocommerce' ),
 				'options'       => array(
 					Products::PRODUCT_IMAGE_SOURCE_PRODUCT        => __( 'Use variation image', 'facebook-for-woocommerce' ),
 					Products::PRODUCT_IMAGE_SOURCE_PARENT_PRODUCT => __( 'Use parent image', 'facebook-for-woocommerce' ),
@@ -1390,6 +1396,8 @@ public function add_product_variation_edit_fields( $index, $variation_data, $pos
 				'value'         => $image_url,
 				'class'         => sprintf( 'enable-if-sync-enabled product-image-source-field show-if-product-image-source-%s', Products::PRODUCT_IMAGE_SOURCE_CUSTOM ),
 				'wrapper_class' => 'form-row form-row-full',
+				'desc_tip'      => true,
+				'description'   => __( 'Please enter an absolute URL (e.g. https://domain.com/image.jpg).', 'facebook-for-woocommerce' ),
 			)
 		);
 

includes/Admin/Abstract_Settings_Screen.php

@@ -33,6 +33,9 @@ abstract class Abstract_Settings_Screen {
 	/** @var string screen description, for display */
 	protected $description;
 
+	/** @var string documentation URL for the more information link */
+	protected $documentation_url;
+
 
 	/**
 	 * Renders the screen.
@@ -68,16 +71,41 @@ public function render() {
 			<?php woocommerce_admin_fields( $settings ); ?>
 
 			<?php if ( $is_connected ) : ?>
-				<input type="hidden" name="screen_id" value="<?php echo esc_attr( $this->get_id() ); ?>">
-				<?php wp_nonce_field( 'wc_facebook_admin_save_' . $this->get_id() . '_settings' ); ?>
-				<?php submit_button( __( 'Save changes', 'facebook-for-woocommerce' ), 'primary', 'save_' . $this->get_id() . '_settings' ); ?>
+				<div class="actions">
+					<input type="hidden" name="screen_id" value="<?php echo esc_attr( $this->get_id() ); ?>">
+					<?php wp_nonce_field( 'wc_facebook_admin_save_' . $this->get_id() . '_settings' ); ?>
+					<?php submit_button( __( 'Save changes', 'facebook-for-woocommerce' ), 'primary', 'save_' . $this->get_id() . '_settings' ); ?>
+					<?php $this->maybe_render_learn_more_link( $this->get_label() ); ?>
+				</div>
 			<?php endif; ?>
 
 		</form>
 
 		<?php
 	}
 
+	/**
+	 * Renders the learn more link if the documentation URL is set.
+	 *
+	 * @param string $screen_label The screen label/title, translated.
+	 *
+	 * @since 3.3.0
+	 */
+	protected function maybe_render_learn_more_link( $screen_label ) {
+		if ( $this->documentation_url ) :
+			?>
+			<span class="learn-more-link"><a href="<?php echo esc_url( $this->documentation_url ); ?>" class="" target="_blank">
+				<?php
+				/*
+				 * Translators: %s Settings screen label/title, in lowercase.
+				 */
+				echo esc_html( sprintf( __( 'Learn more about %s', 'facebook-for-woocommerce' ), strtolower( $screen_label ) ) );
+				?>
+				</a></span>
+			<?php
+		endif;
+	}
+
 
 	/**
 	 * Saves the settings.

includes/Admin/Products.php

@@ -126,7 +126,7 @@ public static function render_google_product_category_fields( \WC_Product $produ
 		?>
 		<p class="form-field">
 			<label for="<?php echo esc_attr( self::FIELD_GOOGLE_PRODUCT_CATEGORY_ID ); ?>">
-				<?php esc_html_e( 'Google product category', 'facebook-for-woocommerce' ); ?>
+				<?php esc_html_e( 'Google Product Category', 'facebook-for-woocommerce' ); ?>
 				<?php echo wc_help_tip( __( 'Choose the Google product category and (optionally) sub-categories associated with this product.', 'facebook-for-woocommerce' ) ); ?>
 			</label>
 			<input

includes/Admin/Settings_Screens/Advertise.php

@@ -32,8 +32,9 @@ class Advertise extends Abstract_Settings_Screen {
 	 */
 	public function __construct() {
 		$this->id    = self::ID;
-		$this->label = __( 'Advertise', 'facebook-for-woocommerce' );
-		$this->title = __( 'Advertise', 'facebook-for-woocommerce' );
+		$this->label             = __( 'Advertise', 'facebook-for-woocommerce' );
+		$this->title             = __( 'Advertise', 'facebook-for-woocommerce' );
+		$this->documentation_url = 'https://woocommerce.com/document/facebook-for-woocommerce/#how-to-create-ads-on-facebook';
 
 		$this->add_hooks();
 	}
@@ -216,6 +217,7 @@ class="fb-lwi-ads-insights"
 			data-fbe-scopes="manage_business_extension"
 			data-fbe-redirect-uri="https://mariner9.s3.amazonaws.com/"></div>
 		<?php
+		$this->maybe_render_learn_more_link( __( 'Advertising', 'facebook-for-woocommerce' ) );
 
 		parent::render();
 	}

includes/Admin/Settings_Screens/Connection.php

@@ -326,7 +326,10 @@ public function get_settings() {
 				'title'    => __( 'Enable debug mode', 'facebook-for-woocommerce' ),
 				'type'     => 'checkbox',
 				'desc'     => __( 'Log plugin events for debugging.', 'facebook-for-woocommerce' ),
-				'desc_tip' => __( 'Only enable this if you are experiencing problems with the plugin.', 'facebook-for-woocommerce' ),
+				/**
+				 * Translators: %s URL to the documentation page.
+				 */
+				'desc_tip' => sprintf( __( 'Only enable this if you are experiencing problems with the plugin. <a href="%s" target="_blank">Learn more</a>.', 'facebook-for-woocommerce' ), 'https://woocommerce.com/document/facebook-for-woocommerce/#debug-tools' ),
 				'default'  => 'no',
 			),
 
@@ -335,7 +338,10 @@ public function get_settings() {
 				'title'    => __( 'Experimental! Enable new style feed generation', 'facebook-for-woocommerce' ),
 				'type'     => 'checkbox',
 				'desc'     => __( 'Use new, memory improved, feed generation process.', 'facebook-for-woocommerce' ),
-				'desc_tip' => __( 'Experimental feature. Only enable this if you are experiencing problems with feed generation. This is an experimental feature in testing phase.', 'facebook-for-woocommerce' ),
+				/**
+				 * Translators: %s URL to the documentation page.
+				 */
+				'desc_tip' => sprintf( __( 'This is an experimental feature in testing phase. Only enable this if you are experiencing problems with feed generation. <a href="%s" target="_blank">Learn more</a>.', 'facebook-for-woocommerce' ), 'https://woocommerce.com/document/facebook-for-woocommerce/#feed-generation' ),
 				'default'  => 'no',
 			),
 

includes/Admin/Settings_Screens/Product_Sync.php

@@ -38,9 +38,10 @@ class Product_Sync extends Abstract_Settings_Screen {
 	 * Connection constructor.
 	 */
 	public function __construct() {
-		$this->id    = self::ID;
-		$this->label = __( 'Product sync', 'facebook-for-woocommerce' );
-		$this->title = __( 'Product sync', 'facebook-for-woocommerce' );
+		$this->id                = self::ID;
+		$this->label             = __( 'Product sync', 'facebook-for-woocommerce' );
+		$this->title             = __( 'Product sync', 'facebook-for-woocommerce' );
+		$this->documentation_url = 'https://woocommerce.com/document/facebook-for-woocommerce/#product-sync-settings';
 		add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_assets' ) );
 		add_action( 'woocommerce_admin_field_product_sync_title', array( $this, 'render_title' ) );
 		add_action( 'woocommerce_admin_field_product_sync_google_product_categories', array( $this, 'render_google_product_category_field' ) );
@@ -261,11 +262,12 @@ public function get_settings() {
 				'title' => __( 'Product sync', 'facebook-for-woocommerce' ),
 			),
 			array(
-				'id'      => \WC_Facebookcommerce_Integration::SETTING_ENABLE_PRODUCT_SYNC,
-				'title'   => __( 'Enable product sync', 'facebook-for-woocommerce' ),
-				'type'    => 'checkbox',
-				'label'   => ' ',
-				'default' => 'yes',
+				'id'       => \WC_Facebookcommerce_Integration::SETTING_ENABLE_PRODUCT_SYNC,
+				'title'    => __( 'Enable product sync', 'facebook-for-woocommerce' ),
+				'type'     => 'checkbox',
+				'label'    => ' ',
+				'default'  => 'yes',
+				'desc_tip' => __( 'Enable product syncing with Facebook.', 'facebook-for-woocommerce' ),
 			),
 
 			array(
@@ -274,7 +276,7 @@ public function get_settings() {
 				'type'              => 'multiselect',
 				'class'             => 'wc-enhanced-select product-sync-field',
 				'css'               => 'min-width: 300px;',
-				'desc_tip'          => __( 'Products in one or more of these categories will not sync to Facebook.', 'facebook-for-woocommerce' ),
+				'desc_tip'          => __( 'Products in any of these categories will not sync to Facebook.', 'facebook-for-woocommerce' ),
 				'default'           => array(),
 				'options'           => is_array( $product_categories ) ? $product_categories : array(),
 				'custom_attributes' => array(
@@ -288,7 +290,7 @@ public function get_settings() {
 				'type'              => 'multiselect',
 				'class'             => 'wc-enhanced-select product-sync-field',
 				'css'               => 'min-width: 300px;',
-				'desc_tip'          => __( 'Products with one or more of these tags will not sync to Facebook.', 'facebook-for-woocommerce' ),
+				'desc_tip'          => __( 'Products with any of these tags will not sync to Facebook.', 'facebook-for-woocommerce' ),
 				'default'           => array(),
 				'options'           => is_array( $product_tags ) ? $product_tags : array(),
 				'custom_attributes' => array(