Skip to main content

Developer's Note: VirtueMart Checkout - Condensing Shipping Pages

This post will handle condensing the shipping address and shipping method pages. If you only offer one choice of shipping to your customer, then it is pointless to present your customer with a page that allows them to select, from one option, the type of shipping they want. It’s also just nice to condense these two pages to help reduce the number of clicks between the start and the end of the purchase process.

Of course, it is still worthwhile to have your customer review their shipping address and to present them with an option to change the shipping address to something different than the bill to address.

Condensing these pages will present your customer with a more streamlined checkout process that will improve your customer’s interaction with your e-commerce site.

The first change needs to be applied in the VirtueMart configuration page. Log into your Joomla installation’s administrator page and then go to your VirtueMart component page. From here, click on configuration and then select the checkout tab.

You’ll see 4 text boxes with numbers in them. Each number represents a page of your checkout process. We’re going to combine the first 2 pages into 1, so you’ll want to reorder the pages (default: 1, 2, 3,4) to 1, 1, 2, 3 and then click apply.

After clicking Apply or Save, you will see the changes immediately on your checkout pages. Now, due to default settings of VirtueMart, the new single page may appear “cramped”. The next step will be to add a space between “Add a new Shipping Address” and “Please Select a Shipping Method!”

The file you need to edit is found here:
\components\com_virtuemart\themes\default\templates\checkout\get_shipping_address.tpl.php

The simplest way to add a space is to place the following at the very end of the file:

<div>
   &nbsp;
</div>
After uploading the file, you’ll see that there is now a decent space inserted in the layout. The next step I recommend is changing the text from “Please Select a Shipping Method” to something along the lines of “Shipping Method” or “Your Shipping Method”, if you are only offering one shipping method.

To edit the text shown, you’ll need to edit the variable PHPSHOP_CHECKOUT_MSG_3 from the file:
\administrator\com_virtuemart\languages\common\english.php

Upload this file and you are complete. You’ve set the shipping method and shipping address to share one page, you’ve adjusted the spacing, and (optionally) you’ve adjusted the text presented to your customer.

Comments

Popular posts from this blog

How To Run Chrome From Within Notepad++

If you have recently tried to Run  Chrome from within Notepad++ recently, you've probably encountered the same issue I did.  Chrome didn't run. The fix is actually really simple.  Open up the Run box in Notepad++ and browse to your installation of Chrome. ie.  C:\Program Files\Google\Chrome\Application\Chrome.exe Select the file when you find it.  Now, the trick is: Put quotation marks around the path you see in the Run  box.  Now, put 1 space after the closing quotation mark. Type this: $(FULL_CURRENT_PATH) It'll look something like this: Click Run .  If Chrome opens, click Save and set your hotkey.

Developer Note: Virtuemart - Editing the Add to Cart MooTool Popup

To edit the “Add To Cart” popup that appears when you add an item to a cart in Virtuemart, there are few files that you need to know about. These are the files to know \components\com_virtuemart\themes\default\theme.js \components\com_virtuemart\js\mootools\   - contains the files for editing the appearance of the popup. To edit the appearance of the box, edit \components\com_virtuemart\js\mootools\mooPrompt.css to change the styles as well as editing the 2 images in the directory to edit how they appear as well (close box and header-background)

Divi Theme - Remove pause 'on hover' of the full width slider

In the Divi theme, open up /js/custom.js Comment out the following code (around line 144) if ( settings.slideshow && et_slides_number > 1 ) { $et_slider.hover( function() { $et_slider.addClass( 'et_slider_hovered' ); if ( typeof et_slider_timer != 'undefined' ) { clearInterval( et_slider_timer ); } }, function() { $et_slider.removeClass( 'et_slider_hovered' ); et_slider_auto_rotate(); } ); }