WooCommerce Checkout Field Editor Date Field Restrictions

At WooThemes we have an awesome add-on for WooCommerce called Checkout Field Editor. This add-on allows to add many new fields to the checkout page. This is a truly great plugin. You can add dropdown select list, checkboxes, radio buttons, and even date pickers. And pretty often people ask me how to apply restrictions on the the date fields types. For example how to force customers to choose a date 4 days after today, or pick a date on a specific dates range etc… And Checkout Fields Editor doesn’t allow to do this by default. Well, that’s understandable, as this will not be used by all users of this add-on, just a few. So, to apply this restrictions on date fields I have a quick snippet for you.

This snippet will output some custom jQuery code in the footer of your site, it has to be placed in functions.php, in your theme folder:

As stated in jQuery UI documentation regarding minDate and maxDate:

Restrict the range of selectable dates with the minDate and maxDate options. Set the beginning and end dates as actual dates (new Date(2009, 1 – 1, 26)), as a numeric offset from today (-20), or as a string of periods and units (‘+1M +10D’). For the last, use ‘D’ for days, ‘W’ for weeks, ‘M’ for months, or ‘Y’ for years.

So, it’s up to you to edit minDate: 1 and adjust it to fit your needs. Enjoy!

Starting the “Blogging for Hippo” contest

Last year at WooThemes, we decided to create a small contest among WooThemes employees called “Blogging for Benjamin”. The aim was to write a blog post every single day during one month, and that was great! This year, Bryce and Barry decided to called it “Blogging for Hippo” (Hippo will be the mascot for the next WooCommerce main version). So, everyday I’ll be posting a new article, until december 24th, if I can ;-)

Continue Reading…

Access WooCommerce Product Tabs Directly via URL

Here is a quick snippet that I wanted to do for a long time. The aim is to allow you to create custom URLs to access products page with a specific tab active. By default, when you access a product page, the “description tab” is active by default, but with this snippet you can open the reviews tab (for example) directly from the URL. Useful isn’t it?

To use is it, simply add the tab name after a #, for example: http://mysite.com/my-product-name#reviews

Simple right?

To be able to use this method, simply paste the following code in the file called functions.php in your theme folder:

And guess what? It works no matter the permalinks structure is ;-)

Here is the result: