Filter uncanny-learndash-groups

ulgm_woocommerce_custom_css

Filters the custom CSS output for WooCommerce products, allowing modification before it's applied.

add_filter( 'ulgm_woocommerce_custom_css', $callback, 10, 1 );

Description

Filters custom CSS output for Uncanny Automator's WooCommerce integration. Developers can modify or add CSS rules to further customize the appearance of WooCommerce elements on the checkout and cart pages. This hook is applied after the minimal WooCommerce styles are registered.

Usage

add_filter( 'ulgm_woocommerce_custom_css', 'your_function_name', 10, 1 );

Parameters

$custom_css (mixed)
This parameter contains the custom CSS string to be applied to the WooCommerce frontend.

Return Value

The filtered value.

Examples

/**
 * Filters the custom CSS for WooCommerce pages to add specific styling for group name fields.
 *
 * This function is an example of how to use the 'ulgm_woocommerce_custom_css' filter hook.
 * It adds a conditional style for elements with the class 'group-name-field' to
 * enhance the appearance of group name input fields on product and cart pages.
 *
 * @param string $custom_css The existing custom CSS string.
 * @return string The modified custom CSS string with the added styles.
 */
add_filter( 'ulgm_woocommerce_custom_css', function( $custom_css ) {
	// Check if we are on a product or cart page to apply these styles.
	if ( is_product() || is_cart() ) {
		// Define the additional CSS rules for the group name field.
		$new_styles = "
			.group-name-field {
				margin-bottom: 20px;
				padding: 15px;
				background-color: #f9f9f9;
				border: 1px solid #eee;
				border-radius: 5px;
			}
			.group-name-field legend {
				font-size: 1.2em;
				font-weight: bold;
				margin-bottom: 10px;
				color: #333;
			}
			.group-name-field label {
				display: block;
				margin-bottom: 8px;
				font-weight: 600;
				color: #555;
			}
			.group-name-field input[type='text'] {
				width: calc(100% - 16px); /* Account for padding */
				padding: 10px;
				border: 1px solid #ccc;
				border-radius: 4px;
				box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
				transition: border-color 0.3s ease;
			}
			.group-name-field input[type='text']:focus {
				border-color: #0073aa;
				outline: none;
				box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 3px rgba(0,115,170,0.2);
			}
		";

		// Append the new styles to the existing custom CSS.
		$custom_css .= $new_styles;
	}

	// Return the modified CSS.
	return $custom_css;
}, 10, 1 ); // Priority 10, accepts 1 argument.

Placement

This code should be placed in the functions.php file of your active theme, a custom plugin, or using a code snippets plugin.

Source Code

src/classes/woocommerce/woocommerce-license.php:387

public function add_minimal_woocommerce_style() {
		if ( is_checkout() || is_cart() ) {
			wp_register_style( 'minimal_woocommerce', plugins_url( 'src/assets/legacy/frontend/css/woocommerce.css', UNCANNY_GROUPS_PLUGIN_FILE ), '', Utilities::get_version() );
			wp_enqueue_style( 'minimal_woocommerce' );
		}

		if ( is_product() || is_cart() ) { // Ensure CSS is only added on product pages
			$custom_css = "
			.group-name-field {
				margin-bottom: 15px;
			}
			.group-name-field label {
				display: block;
				margin-bottom: 5px;
				font-weight: bold;
			}
			.group-name-field input[type='text'] {
				width: 100%;
				padding: 8px;
				border: 1px solid #ccc;
				border-radius: 4px;
			}";
			$custom_css = apply_filters( 'ulgm_woocommerce_custom_css', $custom_css );
			wp_add_inline_style( 'woocommerce-inline', $custom_css ); // Add to existing WooCommerce styles
		}
	}
Scroll to Top