Single Product Page Shipping Methods for WooCommerce

This plugin enables you to display shipping methods on the single product page using WooCommerce. The selection of a shipping option on single product page removes other shipping methods on the cart page so only the method you selected, is displayed on the cart page.

Single Product Page

Backend

On the single product page shipping tab in the backend, you’ll find checkboxes to control which shipping methods you want displayed on the frontend of the single product page.

Frontend

Based on checkbox selection on the backend, you can control which methods are displayed on a per product basis on the frontend. Methods which are not selected displayed as greyed out and cannot be clicked. Selected methods display as a dark background.

See the screenshots to checkout how it looks using both simple and variable products.

Shipping Method Removal

On the cart page, only the shipping method chosen on the single product page will be displayed. All other shipping methods will be removed.

Examples based on 3 shipping methods for :

1. DHL shipping
2. Local Pickup
3. Local delivery

Here are the 3 scenarios based on the 3 shipping methods configured :

• If DHL is selected on the single product page, Local Pickup and Local Delivery will be removed from the cart page.
• If Local Pickup is selected on the single product page, DHL and Local Delivery will be removed from the cart page.
• If Local Delivery is selected on the single product page, DHL and Local Pickup will be removed from the cart page.

Screenshots

Shows the single product page backend checkboxes, front end shipping method selection buttons when selected and deselected and the cart page only displaying the selected shipping method. Click to enlarge.

Usage

Once you’ve installed the Single Product Page Shipping Methods for WooCommerce plugin and created your shipping methods, you’ll find checkboxes have been generated for each method id on the single product shipping tab.

Select the checkboxes to enable which shipping methods you want displayed per product.

There’s also a settings page for enabling the zone name on the frontend of the single product page, before the shipping method buttons.

Developers

There’s also a settings page for enabling the shipping method id on the frontend of the cart page. Debugging is also built into the code for testing the selected shipping method id on the single product page.

Note : You can use any shipping method you like with this plugin. Any shipping methods generated by 3rd party plugins will also added as checkboxes for enabling per single product.

Button Styling

Every theme is different so the only way to style the shipping method buttons on the single product page is to use CSS rules.

These are the default CSS rules included in the plugins style.css file you can use in your child theme to modify the default button styling.

.delivery-option {
	padding: 10px;
	margin: 5px;
	cursor: pointer;
	border: none;
	color: white;
	font-size: 14px;
	border-radius: 5px;
	transition: background 0.3s ease-in-out;
}

.available {
	background-color: #D73301; /* Orange for available options */
}

.unavailable {
	background-color: #ccc;
	cursor: not-allowed;
}

.selected {
	background-color: #111 !important; /* Dark for selected */
	color: white !important;
	border: 2px solid #0056b3;
}

Version

Current version is V3-121656