Always back up your theme before making any changes. Directly editing theme files can be risky, and a minor oversight might cause issues with your website’s functionality.

We are going to add the following code snippet in our active theme’s functions.php file.

Accessing the theme’s functions.php file

• Navigate to your WordPress Dashboard.
• Go to Appearance > Theme Editor.
• On the right side, find and click on the functions.php file. This is where you’ll be adding the provided code.
• Add the following code snippet.

function customizer_login_logo() {
    if ( ! has_custom_logo() ) {
       return;
    }

    $custom_logo_id = get_theme_mod('custom_logo');

    $logo = wp_get_attachment_image_url($custom_logo_id, 'full');

    echo '<style type="text/css">
          #login h1 a {
                background-image: url(' . esc_url( $logo ) . ');
                background-size: contain;
                width: auto;
                height: 120px;
          }
    </style>';
}
add_action( 'login_head', 'customizer_login_logo' );

If you don’t see the Theme Editor option under Appearance it means that you are using a Full Site Editing theme. We will cover this scenario in an upcoming tutorial.

And that’s it!

Now every time you change your website’s logo through Appearance > Customize > Site Identity the logo on your WordPress login page will also be updated.

The post Customizing the WordPress Login Logo Using the Theme Customizer’s Logo appeared first on CSSIgniter.

Accessing the wp-config.php file: Key points to consider

1. Locate the File: The wp-config.php file sits in the root directory of your WordPress installation. If you have access to your web server through a File Manager (often found in cPanel) or via an FTP client like FileZilla, navigate to the main directory where WordPress is installed. You should see wp-config.php listed alongside folders like wp-content, wp-admin, and wp-includes.
2. Backup Before You Begin: Before making any changes, always create a backup of the wp-config.php file. This ensures that you can quickly revert to the original state if anything goes wrong.
3. Be Cautious: The wp-config.php file is crucial to your WordPress site’s operation. A small error, like an incorrect value, can break your site. Always double-check any changes you make.

1. WP_ALLOW_REPAIR

If you suspect that your database is corrupt, you can define this constant and allow WordPress to repair it automatically like so:

define('WP_ALLOW_REPAIR', true);

When set, it enables the database repair page that you can access by visiting http://yourwpsite.com/wp-admin/maint/repair.php. Once you are done don’t forget to either remove it or set it to false.

2. AUTOMATIC_UPDATER_DISABLED

define( 'AUTOMATIC_UPDATER_DISABLED', true );

When added, it disables all automatic updates in WordPress. This includes updates for the WordPress core, plugins, themes, and translations. It’s especially useful for website managers who prefer to handle updates manually, ensuring that they have full control over any changes to their site. However, with this setting enabled, it’s essential to regularly check for and apply important updates to keep the site secure and functioning well.

3. WP_AUTO_UPDATE_CORE

To control the WordPress core updates, use this constant:

define('WP_AUTO_UPDATE_CORE', 'minor');

It can have three values:

• Value of true – Development, minor, and major updates are all enabled.
• Value of false – Development, minor, and major updates are all disabled.
• Value of 'minor' – Minor updates are enabled, development, and major updates are disabled.

4. DISALLOW_FILE_EDIT

For security reasons, you may want to disable the file editor inside the WordPress dashboard. This constant disables the theme and plugin editor. If you’re managing a client’s site and want to ensure that neither the client nor any other users accidentally or intentionally edit the theme or plugin files directly from the WordPress dashboard, you can use this constant:

define('DISALLOW_FILE_EDIT', true);

5. WP_POST_REVISIONS

By default, WordPress stores every version of a post or page as a revision. This can take up a lot of database space. Use this constant to control the number of revisions, in the following example we are setting the number to 5 revisions

define('WP_POST_REVISIONS', 5); 

or to disable them altogether:

define('WP_POST_REVISIONS', false);

6. EMPTY_TRASH_DAYS

In the day-to-day operation of a WordPress site, content gets created, updated, and, inevitably, deleted. When items (like posts, pages, or comments) are deleted in WordPress, they aren’t immediately and permanently removed. Instead, they move to the Trash, offering a safety net against accidental deletions.

The EMPTY_TRASH_DAYS constant in the wp-config.php file governs how long items remain in the Trash before WordPress permanently deletes them. By default WordPress will empty the trash every 30 days. Let’s say this value to 7 days, 1 week:

define('EMPTY_TRASH_DAYS', 7);

I would strongly suggest against setting this constant to zero, especially for sites with multiple authors. Without the trash safety net, accidental deletions are irreversible.

7. AUTOSAVE_INTERVAL

As you write or edit a post, WordPress periodically saves a draft automatically. It’s a valuable safety net, ensuring that in case of a crash, lost connection, or inadvertent tab closure, your hard work isn’t lost. By default, WordPress will autosave your content every 60 seconds but you can customize this by setting this constant:

define('AUTOSAVE_INTERVAL', 120); // 120 seconds, 2 minutes.

8. WP_MEMORY_LIMIT

As your site grows, receives more traffic, or uses more plugins, it might require more memory to operate smoothly. The WP_MEMORY_LIMIT constant allows you to specify the maximum amount of memory that can be consumed by PHP for WordPress processes. You can set a custom value like so:

define('WP_MEMORY_LIMIT', '128M');  // Set PHP memory limit to 128 megabytes.

If you want to learn more about this constant, you can read Jetpack’s excellent guide on how to check and increase your memory limit.

9. CORE_UPGRADE_SKIP_NEW_BUNDLED

When WordPress releases major updates, it often comes with new themes or plugins that are bundled with the core package. These themes, like the annual “Twenty” series (e.g., Twenty Twenty-Three), are automatically added to your site upon updating WordPress. While this ensures users have access to the latest default themes, not every site administrator or developer may want these additional themes installed. The CORE_UPGRADE_SKIP_NEW_BUNDLED constant provides a solution to this:

define('CORE_UPGRADE_SKIP_NEW_BUNDLED', true);

10. WP_DEFAULT_THEME

If you create multiple WordPress sites for clients, setting a custom default theme ensures a consistent starting point for every new site. By setting this constant, every installation will start with a specific custom theme. Set it like so:

define('WP_DEFAULT_THEME', 'your-theme-folder-name');

Ensure that the theme specified in WP_DEFAULT_THEME is present in the wp-content/themes/ directory. If the theme isn’t found, WordPress will default to one of the “Twenty” series themes.

11. WP_DEBUG

define('WP_DEBUG', true);

This constant triggers the “debug” mode throughout WordPress. When set to true, WordPress will start displaying PHP errors, notices, and warnings. It’s an invaluable tool during development to catch potential issues, as these errors can give insights into problematic plugins, themes, or custom code. Keep in mind that WP_DEBUG should typically be set to false on production sites.

12. WP_DEBUG_DISPLAY

define('WP_DEBUG_DISPLAY', false);

This constant controls whether the errors and warnings generated by WP_DEBUG are displayed on the screen. When set to false, these errors will be hidden from users. Combined with WP_DEBUG_LOG (see below), this means errors will be captured in the log but not shown on the site.

13. WP_DEBUG_LOG

define('WP_DEBUG_LOG', true);

When this constant is set to true, any errors that would be displayed on the screen (as controlled by WP_DEBUG and WP_DEBUG_DISPLAY) will be saved to a debug.log file inside the wp-content directory. This provides a way to track errors over time or capture sporadic issues.

Remember, every adjustment to the wp-config.php is a step towards perfecting your site, but always tread with caution. Ensure you back up regularly, and consider every change’s impact.

The post 13 Essential wp-config.php tweaks every WordPress user should know appeared first on CSSIgniter.

If you have a WordPress site, adding a video popup is a simple process that can make a big impact. Whether you want to highlight a specific video, promote your channel, or share your latest content, a video popup is an effective way to do so.

In this article, we will walk you through the step-by-step process of adding a video popup to your WordPress site. Whether you’re a beginner or an experienced user, our guide will help you create a professional and captivating video popup that will keep your audience engaged.

What is a Video Popup?

A video popup is a small window that appears over your website content and plays a self-hosted video. The popup can be customized to match your site’s branding and design, and it can be triggered by different events, such as clicking a button, scrolling down the page, or even when the page loads.

Self-hosting video, when done correctly, provides businesses with a variety of benefits, including:

• Control: By hosting the video on your server, you have full control over the video’s content, its quality, and its distribution. You can customize the video player to suit your needs and branding.
• Traffic: When people link to your videos, they will link back to your website instead of to YouTube, Vimeo, or another video platform. This increases the authority of your site.
• Privacy: If you’re concerned about privacy, self-hosting your videos can be a good option. You can keep your videos private and prevent user tracking by not using a third-party service like YouTube.

By displaying your videos in a popup, you can ensure that your website provides a seamless and engaging user experience while maximizing conversions and lead generation efforts.

What You Need to Know Before You Start

In this article, we will use FireBox to create the popup. FireBox makes it super simple to create powerful mobile-friendly popups that convert. It’s built around the new Gutenberg Block editor, which allows users to edit content in a new way. Using blocks, you can insert, rearrange, and style your pop-ups quickly and easily.

To install FireBox, simply navigate to Plugins → Add New in your WordPress dashboard and search for FireBox. Next, click the Install Now button and wait for the plugin to be installed. Once the plugin is installed, you can click the Activate button.

Read more about installing Firebox.

Next, to load a self-hosted video with a video player in our popup, we will use the Video Block from GutenBee. It’s a free collection of elegant WordPress blocks that can take your content creation to the next level.

Let’s install GutenBee too. While on the same screen on your WordPress dashboard, search for gutenbee, click Install Now, and then Activate as you did with FireBox.

To read more details about the installation process of GutenBee, visit GutenBee’s documentation page.

How to Add a Video Popup in WordPress

Now that you understand the benefits of using a video popup and you’ve both required plugins installed, let’s look at how to create our popup.

Head to the FireBox plugin in your WordPress dashboard and click New Popup.

You will see a dialog with pop-up layouts appearing. FireBox comes with a big collection of pixel-perfect popup templates, but we will not use any of them for this case. So, instead, click Blank Popup to start creating one from scratch. Don’t worry, it’s not as scary as it sounds.

Once the popup builder editing page loads, you will notice an empty rectangle at the center of the screen. It should look like this:

The first thing to do is add our video to the popup’s content. To do so, click the Plus icon to open the block selection dialog. Next, search for gutenbee video and click to add it.

Next, click either Upload to upload a new video on your site or click Media Library to select an existing video. Once you pick a video, your screen should look like this:

Theoretically, your popup is ready. If you click Publish, you will see the popup appearing on the front end. But before doing so, let’s customize it to make it more attractive and user-friendly.

Scroll to the FireBox settings in the Design tab, and apply the following:

1. Set the Width to 900px to make the video a bit larger.
2. Set Padding to 0 to remove the extra gap around the video.
3. Set the Background Color to rgba(255,255,255,0) to have a transparent container.
4. Set Shadow to Elevation to contrast the popup and the page’s content.
5. In the Border section, set it to None. We don’t need any border in our case.
6. Click to enable the Overlay option. This adds an extra contrast to our popup and secondly allows the closing of the popup by clicking on the area outside of the popup.

The popup is now ready, and you may hit Publish!

Once the popup is published, go to your front end and refresh the page. You will see the popup appearing automatically when the page loads. Congratulations, you’ve successfully created your first WordPress video popup!

Here’s what the popup looks like in our example:

If you don’t want the popup to appear on page load, you can change this in the Behavior tab in the Trigger Point section. FireBox has 10+ popup triggers, such as On Exit, Scroll, Idle, Click, and many more.

Moreover, you will notice that the popup appears on all pages. If you don’t like this, the Display Conditions tab can help you control when and where the popup will appear. You can set it to appear when visitors access specific menu items, URLs, contents, and pages. We can also schedule it to display based on the location or devices of visitors.

Best Practices for Creating a Video Popup in WordPress

Here are some best practices to keep in mind when creating a video popup in WordPress:

• Keep it short: The video should be short. Avoid using long videos that may lose your visitors’ attention.
• Choose the right trigger: Choose a trigger that makes sense for your content and visitors. For example, if you promote a product, use a button trigger on your product page instead of showing the popup on page load.
• Test different designs: Test different designs and settings to see what works best for your site and audience. You can also use A/B testing to compare different variations of your popup.
• Optimize for mobile: Make sure the popup is optimized for mobile devices, as many visitors may be using their smartphones to access your site.

Conclusion

Adding a video popup to your site is a great way to increase user engagement. Following these simple steps, you can create a professional and effective video popup to capture your audience’s attention and promote your content. Test different designs and settings to see what works best for your site and audience.

The post How to Create a Video Popup in WordPress appeared first on CSSIgniter.

Install and activate a child theme

The first step on our process here is to create and install a child theme. If you are using one of our themes you can easily grab its child theme from our downloads section. If not, you can read our beginner’s guide on child themes to create your own. This step is essential in order to preserve our changes throughout theme updates.

Hide other shipping methods when free shipping is available

WooCommerce by default will display all shipping methods available to the customer even if it does not make perfect sense sometimes.

Above we can see that customers can choose the flat rate shipping fee while free shipping is available, no customers will prefer to pay for something that they can get for free, so let’s make WooCommerce hide other shipping methods when free shipping is available.

To achieve our goal we will be using the woocommerce_package_rates hook to filter the available shipping rates and keep just the free shipping one.

add_filter( 'woocommerce_package_rates', 'cssigniter_hide_other_methods_when_free_shipping_is_available', 100 );
function cssigniter_hide_other_methods_when_free_shipping_is_available( $rates ) {
	$free = array();
	foreach ( $rates as $rate_id => $rate ) {
		if ( 'free_shipping' === $rate->method_id ) {
			$free[ $rate_id ] = $rate;
			break;
		}
	}

	return ! empty( $free ) ? $free : $rates;
}

As seen in the code above, we grab all the available shipping rates, and go through them to see if free shipping appears among them, if it does we grab it and return just that one, otherwise we return them back without processing them at all.

Now only the free shipping is available and preselected for all purchases.

Keep local pickup along with free shipping

While free shipping is very tempting, some customers might prefer to pick up the products themselves to get them in their hands quicker, so let’s give them this option by modifying our code a little bit.

add_filter( 'woocommerce_package_rates', 'cssigniter_hide_other_methods_except_pickup_when_free_shipping_is_available', 10, 2 );
function cssigniter_hide_other_methods_except_pickup_when_free_shipping_is_available( $rates ) {
	$my_rates = array();
	foreach ( $rates as $rate_id => $rate ) {
		if ( 'free_shipping' === $rate->method_id ) {
			$my_rates[ $rate_id ] = $rate;
			break;
		}
	}

	if ( ! empty( $my_rates ) ) {
		foreach ( $rates as $rate_id => $rate ) {
			if ( 'local_pickup' === $rate->method_id ) {
				$my_rates[ $rate_id ] = $rate;
				break;
			}
		}
		return $my_rates;
	}

	return $rates;
}

Once again we use the woocommerce_package_rates hook to get the available rates, next we check if free shipping is available, if it is we store it in the $my_rates array and then we check if local pickup is also available, if we find it we store it in the same array and return it providing the customer with just these two shipping options. If free shipping is not available, we return all the available rates without processing them.

Free shipping and local pickup are available and flat rate shipping is removed.

Wrapping up

With these simple snippets we can make the checkout process more clean for our customers by hiding shipping methods that they are very unlikely to pick. Did you find this tutorial useful? Let us know in the comments below.

The post Hide other shipping methods if free shipping is available appeared first on CSSIgniter.

Install and activate a child theme

The first step on our process here is to create and install a child theme. If you are using one of our themes you can easily grab its child theme from our downloads section. If not, you can read our beginner’s guide on child themes to create your own. This step is essential in order to preserve our changes throughout theme updates.

Add up-sells to the order thank you page

We will be using the woocommerce_thankyou hook with a priority of 5 to show the grid just above the order details section, if you prefer it below that, you can increase the priority to 15.

add_action( 'woocommerce_thankyou', 'cssigniter_show_onsale_onthankyou', 5 );
function cssigniter_show_onsale_onthankyou( $order_id ) {
	$order       = wc_get_order( $order_id );
	$products    = $order->get_items();
	$product_ids = array();

	foreach ( $products as $product ) {
		array_push( $product_ids, $product->get_product_id() );
	}

	$upsell_product_ids = array();

	foreach ( $product_ids as $product_id ) {
		$product    = wc_get_product( $product_id );
		$upsell_ids = $product->get_upsell_ids( $product_id );

		foreach ( $upsell_ids as $upsell_id ) {
			if ( 'variation' === wc_get_product( $upsell_id )->get_type() ) {
				$upsell_id = wc_get_product( $upsell_id )->get_parent_id();
			}
			array_push( $upsell_product_ids, $upsell_id );
		}
	}

	if ( empty( $upsell_product_ids ) ) {
		return;
	}

	?>
	<div class="thankyou-onsale-wrapper">
		<h3><?php esc_html_e( 'Check out these products!', 'your-text-domain' ); ?></h3>
		<?php echo do_shortcode( '[products limit="3" columns="3" ids="' . implode( ', ', $upsell_product_ids ) . '"]' ); ?>
	</div>
	<?php
}

Let’s break down our code a bit. In lines 3 to 9 we get the products from the current order and store their ids in an array. In lines 13 to 23 we iterate that array and for each product we check if it has upsells, if it does we store their ids in another array and iterate that to find out if any of these ids represents a variation in order to get its parent product’s id. We store all the results in a final array which contains the upsell products we want to display. Finally in line 32 we use the shortcodes provided by WooCommerce to create a grid of three products in a three column layout with our upsell products.

Wrapping up

In just a few minutes we have managed to add up-sell products on the product thank you page to draw the customers’ attention back to our products, potentially increasing our sales. Do you think this guide will help your store? Let us know in the comments below.

The post Show up-sells on the order thank you page appeared first on CSSIgniter.

Install and activate a child theme

The first step on our process here is to create and install a child theme. If you are using one of our themes you can easily grab its child theme from our downloads section. If not, you can read our beginner’s guide on child themes to create your own. This step is essential in order to preserve our changes throughout theme updates.

Set a default country and state

If most of your orders come from a particular country or even state/region, perhaps the place your company is based in, you can set them as defaults on the checkout page saving your customers from having to fill them in on the checkout page.

add_filter( 'default_checkout_billing_country', 'cssigniter_change_default_checkout_billing_country' );
add_filter( 'default_checkout_billing_state', 'cssigniter_change_default_checkout_billing_state' );

function cssigniter_change_default_checkout_billing_country() {
	return 'GR';
}

function cssigniter_change_default_checkout_billing_state() {
	return 'M';
}

To do that we use two hooks, default_checkout_billing_country for the default billing country and default_checkout_billing_state for the default billing state. In line 5 we need to fill in the code for our country and in line 9 the code for our state/region. For our example we have chosen Greece as the default country and Crete as the default state.

The default country and state are now pre-selected.

You can checkout lists of all available codes in the countries and states files in the plugin’s internationalization folder (i18n) or check them out on WooCommerce’s repository on GitHub (countries, states). That’s it, now these two fields will default to our selections on the checkout page.

Unset billing fields from the checkout page

The billing information form contains many fields and in some cases some of them might be of no use to our store, in such a case it would be beneficial to hide them in order to shorten the amount of time the customer has to spend filling in their information.

add_filter( 'woocommerce_checkout_fields', 'custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) {
	// unset( $fields['billing']['billing_first_name'] );
	// unset( $fields['billing']['billing_last_name'] );
	unset( $fields['billing']['billing_company'] );
	//unset( $fields['billing']['billing_address_1'] );
	unset( $fields['billing']['billing_address_2'] );
	// unset( $fields['billing']['billing_city'] );
	// unset( $fields['billing']['billing_postcode'] );
	unset( $fields['billing']['billing_country'] );
	// unset( $fields['billing']['billing_state'] );
	// unset( $fields['billing']['billing_phone'] );
	// unset( $fields['order']['order_comments'] );
	// unset( $fields['billing']['billing_email'] );
	// unset( $fields['account']['account_username'] );
	// unset( $fields['account']['account_password'] );
	// unset( $fields['account']['account_password-2'] );

	return $fields;
}

In the snippet above each line unsets a certain checkout billing fields, by their names we can easily understand which line unsets which field. In our example here we have left uncommented the lines which unset the company name, the second line of the street address and the country (this can be done for example if you only ship products within your base country, and have set a default country using the code described in the previous section).

The Company name, the Country and the 2nd address field have been removed.

By commenting or uncommenting any of the lines above you can tailor your checkout fields to your needs.

Restrict the size of the order notes textarea

WooCommerce offers a textarea for order notes for customers to fill in anything they deem helpful to the store owner, delivery people etc. WooCommerce does not impose any limit to the size of these notes which might lead customers to add too much information leading to confusion. To avoid such situations we’re going to filter the checkout fields using the woocommerce_checkout_fields hook to apply a limit of 500 characters to the order notes.

add_filter( 'woocommerce_checkout_fields', 'filter_checkout_fields' );
function filter_checkout_fields( $fields ) {

	$placeholder = $fields['order']['order_comments']['placeholder'] . __( ' 500 characters max.', 'your-text-domain' );

	$fields['order']['order_comments']['placeholder'] = $placeholder;
	$fields['order']['order_comments']['maxlength'] = 500;
	return $fields;
}

In the snippet above we append a notice to the default WooCommerce placeholder for the order notes area informing customers about the newly imposed limit and set that limit to 500 characters. Now the textarea won’t allow users to enter text larger than 500 characters.

On top is the default order note which allows unlimited characters.
Second comes our modified textarea with the restriction notice.
Finally we can see it in action on the 500 character cut-off.

Wrapping up

Today we have managed to lightly customize our checkout page and make it a bit more friendly and less time consuming for our customers, while making our life easier by having our customers write concise order notes instead of loosely structured stream of thoughts. Do you have any more ideas regarding checkout page modification? Let us know in the comments below.

The post Streamline your WooCommerce checkout page appeared first on CSSIgniter.

Install and activate a child theme

The first step on our process here is to create and install a child theme. If you are using one of our themes you can easily grab its child theme from our downloads section. If not, you can read our beginner’s guide on child themes to create your own. This step is essential in order to preserve our changes throughout theme updates.

Blocking checkout if outstanding payments are found

To add our check for pending payments we will use the woocommerce_checkout_process hook and use it to look for pending payment orders on the customer’s history.

add_action( 'woocommerce_checkout_process', 'cssigniter_prevent_checkout_if_pending_payments' );
function cssigniter_prevent_checkout_if_pending_payments() {
	$customer = wp_get_current_user();

	if ( ! empty( $customer ) ) {
		$args = array(
			'customer_id' => $customer->ID,
			'status'      => array( 'wc-pending' ),
		);

		$pending_orders = wc_get_orders( $args );

		if ( count( $pending_orders ) > 0 ) {
			$payment_links = array();

			foreach ( $pending_orders as $pending_order ) {
				array_push( $payment_links, '<a href="' . $pending_order->get_checkout_payment_url() . '" target="_blank">#' . $pending_order->get_order_number() . '</a>' );
			}

			$payment_links = implode( ', ', $payment_links );
			$message       = sprintf(
				// Translators: 1$%s is the my account page URL, 2$%s are the individual pending order payment links.
				__( 'Please take care of any outstanding payments from your <a href="%1$s" target="_blank">account page</a>, or the following links %2$s, before proceeding with new orders. Thank you.', 'your-text-domain' ),
				wc_get_page_permalink( 'myaccount' ),
				$payment_links
			);

			wc_add_notice( $message, 'error' );
		}
	}
}

Let’s break things down a bit. We start by getting the current user to find out which customer is making the order. If the current user exists, i.e. it is a returning customer we get all their pending orders using wc_get_orders and if we find any we create a WooCommerce notice which informs the customer that they have pending payments under their user account, the notice prompts the customer to take care of these pending payments and provides them with links to both their my account page and to each order’s payment URL directly. This way they can sort the payments out and be able to place new ones on the store.

The notice received when the user has pending payments in their account.

Wrapping up

With this simple snippet we managed to prevent any users with outstanding payments from placing additional ones until they take care of their balance. Did you find this tutorial useful? Please let us know in the comments below.

The post Prevent the checkout process if the customer has pending payments appeared first on CSSIgniter.

Install and activate a child theme

The first step on our process here is to create and install a child theme. If you are using one of our themes you can easily grab its child theme from our downloads section. If not, you can read our beginner’s guide on child themes to create your own. This step is essential in order to preserve our changes throughout theme updates.

Change the price display

Our task today is very simple. We will be replacing the default price range displayed on variable productsAll we need is some code that gets the minimum and maximum prices, makes sure they are different and then replaces them with our chosen output.

add_filter( 'woocommerce_get_price_html', 'cssigniter_change_variable_price_display', 10, 2 );
function cssigniter_change_variable_price_display( $price, $product_obj ) {
    global $product;

    if ( 'variable' !== $product->get_type() || 'product_variation' === $product_obj->post_type ) {
        return $price;
    }

    $prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
    // Translators: %s is the lowest variation price.
    $price = $prices[0] !== $prices[1] ? sprintf( __( 'From: %s', 'your-text-domain' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

    return $price;
}

We hook our code on woocommerce_get_price_html and in line 11 we create the new string which will be presented to our customers. In our case this will be “From:” along with the price. You can easily change it to something else by replacing the 'From: %s' with something else, for example 'Starting at: %s' just make sure you include the argument %s which will be replaced with the price.

The new string of text on the product listing page.

The new string of text in the single product view.

Wrapping up

In today’s tutorial we have easily replaced the default variable price range display with something more tailored to our store. The replacement string can be easily modified and translated if needed. Did you find this guide useful? Let us know in the comments below.

The post Change the price display on variable products appeared first on CSSIgniter.

Install and activate a child theme

The first step on our process here is to create and install a child theme. If you are using one of our themes you can easily grab its child theme from our downloads section. If not, you can read our beginner’s guide on child themes to create your own. This step is essential in order to preserve our changes throughout theme updates.

Display the banner

To display our banner we will use the woocommerce_single_product_summary hook. By default WooCommerce has the product title, rating, price, excerpt, meta and sharing options hooked with priorities of 5, 10, 10(?), 20, 40 and 50 respectively. Let’s show our banner below the price and use a priority of 19.

add_action( 'woocommerce_single_product_summary', 'cssigniter_display_banner_below_single_title', 19 );
function cssigniter_display_banner_below_single_title() {
	ob_start(); ?>
		<div class="woocommerce-message">
			<?php esc_html_e( 'This is a great banner', 'your-text-domain' ); ?>
		</div>
	<?php
	echo ob_get_clean();
}

Now we have a banner with our text which appears on all products below the price. Let’s take it a step further and say we want to let our customers know of a same day shipping possibility if they order before a certain time.

add_action( 'woocommerce_single_product_summary', 'cssigniter_display_banner_below_single_title', 19 );
function cssigniter_display_banner_below_single_title() {

	$cur_dt    = current_datetime();
	$weekday   = absint( $cur_dt->format( 'N' ) );
	$localtime = $cur_dt->getTimestamp() + $cur_dt->getOffset();
	$noon      = new DateTime( 'today noon', wp_timezone() );
	$localnoon = $noon->getTimestamp() + $noon->getOffset();

	if ( ( $localtime >= $localnoon ) || in_array( $weekday, array( 6, 7 ), true ) ) {
		return;
	}

	ob_start();
	?>
		<div class="woocommerce-message">
			<?php esc_html_e( 'Order now to get it shipped today!', 'your-text-domain' ); ?>
		</div>
	<?php
	echo ob_get_clean();
}

Our snippet above will output a message that urges our customers to order now in order to have the product shipped to them today. The snippet will only display the message if the store’s local time is before noon (12pm) and if it is not a Saturday or Sunday. You can have a look at PHP’s DateTime object format if you want to fiddle around with the $noon variable which returns a date object of the current day’s noon on the UTC timezone.

Wrapping up

With this small snippet we can easily add a banner to all our products informing users of a service like the same day shipping in the example above, or a store wide offer and anything else we might want our customers to notice. With an easy modification on the dates we can set it to display a limited time offer and have it disappear once the offer period passes, without having to worry about removing it manually. Did you find this snippet useful? Let us know in the comments below.

The post Display a notice on the single WooCommerce product page appeared first on CSSIgniter.

Install and activate a child theme

The first step on our process here is to create and install a child theme. If you are using one of our themes you can easily grab its child theme from our downloads section. If not, you can read our beginner’s guide on child themes to create your own. This step is essential in order to preserve our changes throughout theme updates.

Adding the button

We will start by displaying the button on simple products on the product listing and single product pages, just after the default add to cart button.

add_action( 'woocommerce_after_shop_loop_item', 'cssigniter_buy_now_button', 15 );
add_action( 'woocommerce_after_add_to_cart_button', 'cssigniter_buy_now_button' );
function cssigniter_buy_now_button() {
	global $product;

	if ( 'simple' !== $product->get_type()
	|| ! $product->is_purchasable()
	|| ! $product->is_in_stock() ) {
		return;
	}

	$id = $product->get_ID();

	$classes = implode(
		' ',
		array_filter(
			array(
				'button',
				'product_type_' . $product->get_type(),
				'add_to_cart_button',
			)
		)
	);

	ob_start();

	?>
	<a
	href="<?php echo esc_url( wc_get_checkout_url() ); ?>?add-to-cart=<?php echo absint( $id ); ?>"
	class="<?php echo esc_attr( $classes ); ?>"
	rel="nofollow">
	<?php echo esc_html_e( 'Buy Now', 'your-text-domain' ); ?>
	</a>

	<?php

	echo ob_get_clean();
}

Our code here is pretty simple. We use two hooks, the woocommerce_after_shop_loop_item to show the button on the product listing pages, here we need the priority set to 15 in order for our button to appear after the add to cart. The second hook is woocommerce_after_add_to_cart_button to display the button on single the single product view. We start with some checks, first we check if we are on a simple product, then we check if the product is purchasable and if it is in stock, if we are good to go, we gather up some CSS classes needed for our button to look as required and we proceed with creating the button. Essentially line 29 is where everything happens. We create a URL for our button which adds the product to the user’s cart automatically and redirects them to the checkout page, skipping the cart page entirely, thus making the checkout experience a bit faster. This is what the button will look like:

If we press it, for example on the Long Sleeve Tee product, it will send us directly to the checkout page with the product added to the cart.

Wrapping up

With today’s small guide we have successfully added a buy now button to our simple products, both on the product listing and the single product page, allowing our customers to quickly purchase a single product without having to see the cart page.

The post Add a buy now button to your WooCommerce products appeared first on CSSIgniter.