Posted on Leave a comment

A spanner in the works.

Our system builder plugin has thrown another spanner in the works.

A spanner along the lines of “You know what would work better for existing machines what need configuring by users?” Uhoh.. “The options being on the product’s page!”.  Thanks brain, been too busy on the builder to actually notice that.

Now that’s been thought up, I’m thinking of using that instead of starting a new product, limit choices on each machine tied to board/CPU. Offer a choice of a case instead of making the case a starting point.

Back to the start again, some of the stuff I can use from earlier work. Most of it won’t work in the new structure.

Another aim of the project was to use scripts and functions built into WordPress and Woocommerce rather than calling in more scripts, which would go out of date if hard coded. By using WordPress’s own libraries, we shouldn’t have to worry about jQuery for a while.

I’ll add the select method as an additional file to the Github repository of the project. Upon that update, I’ll final version that and start a new plugin for the product page customizer.

Posted on Leave a comment

Woocommerce Custom data in Custom product tabs

custom product tabs

 

Allow custom fields to be viewed in a custom product tabs in WooCommerce

Woocommerce as standard doesn’t come with a naming tab system. You get a choice of Product Description, Additional Information, and Reviews. While the options in Additional Information could work, it looks ugly and unmanageable with data imports.

Luckily, there is a way around it all. Make our own custom product tabs.

We import our product data into a Custom Field called ‘Specification’ , and set about creating a tab called ‘Specification’. This is done via child theme’s function.php.

This code will Add a tab called Specifications, and display data from a custom field called ‘Specification’ (yes I know, never updated it).. Remember to change name and custom field to what you want to use.

Functions.php:

// woocommerce tabs
add_filter( ‘woocommerce_product_tabs’, ‘woo_new_product_tab’ );
function woo_new_product_tab( $tabs ) {
global $post, $product;
$specification= get_post_meta($post->ID, ‘specification’, TRUE);
// Adds the new tab
if (!empty($specification)) {
$tabs[‘test_tab’] = array(
‘title’ => __( ‘specification’, ‘woocommerce’ ),
‘priority’ => 50,
‘callback’ => ‘woo_new_product_tab_content’
);
}return $tabs;
}
function woo_new_product_tab_content() {
global $post, $product;
$specification = get_post_meta($post->ID, ‘specification’, TRUE);
echo($specification);
}

get_post_meta is what calls the custom field data, via ‘ID>field name, True’. This code loads it into an array for formatting and placing in the tab. There is possibly an easier way to do all of this, but it works. Priority defines where the tab will show, 30 is where ‘additional information’ tab is so our code overrides it. The first tab has a default of 10.

Next we’ll need some Woocommerce templates in our child theme under Theme-Name/woocommerce, make sure ‘Single-product/tabs’ directory is there and create a new file called ‘Specification.php’  and ‘tab-specification.php’, These will tell WooCommerce what to display from where.

I’ve named the custom product tab ‘Specifications’, remember to replace that with your intended name.

specifications.php:

<?php
/**
* Specifications Tab
*/
global $post;
$meta_content = apply_filters(‘the_content’, get_post_meta($post->ID, ‘Specification’, true));
?>
<div class=”panel” id=”tab-specifications”>
<?php $heading = apply_filters(‘product_specifications_heading’, __(‘Product Specifications’)); ?>
<h2><?php echo $heading; ?></h2>
<?php echo $meta_content; ?>
</div>

tab-specification.php:

<?php
// Get Custom Field “specifications” meta data
global $post;
$meta_content = apply_filters(‘the_content’, get_post_meta($post->ID, ‘Specification’, true));
if (!empty($meta_content)) { ?>
<li><a href=”#tab-specifications”><?php _e(‘Specifications’); ?></a></li>
<?php } ?>

Again, change the names (in this example ‘Specifications’) to what you want to use.

 

Notes

  • This will also auto-hide the tab from users if there’s no data in the custom field to display.
  • This has been tested in WooCommerce (upto 2.4.5, August 22nd 2015) and WordPress 4.3 with no issues. Should work fine unless something drastic changes in the way product templates work.
  • You can add information to this tab by adding data into the custom field on product edit pages. If you don’t see any section for custom fields, check under ‘Screen Options’ on the top right and check its enabled.
  • Custom fields should allow HTML code to be displayed in in most content, check your theme’s sanitation methods if HTML tags appear randomly in custom fields.

Credits

Thanks to Kieran Barnes and Sean Barton for their working examples and guides on how the tabs system works and its associated actions/filters.

 

Posted on Leave a comment

We’re getting there!

Funnily enough, I used to be a perfectionist.. Struggled for hours to get something to look right, feel right and more importantly than looks.. Work right.

What happen to old me? Well, put in time constraints, other people taking their time and enforcing their own views and quirks.. That’s the recipe to make me say ‘screw it!’

Last few days recovering from coughs and the usual madness of trying to get some help to push my plans along (looks like that’s quite accessible isn’t it, government?..).

I decided its time to start working on what I said I want working. Finally I’ve started getting things rolling again in that regard, today alone has been quite successful after researching some functions (get_post_meta) and how they work within WordPress.. I almost feel confident enough to explain how it works and how to make posts look really organized and useful.

Also some improvements to site layout, speed and other functions coming over this weekend.. (Hint: Social commenting works now too, no messing around with accounts to leave a comment..)

 

Posted on Leave a comment

Redesign / rebuild Website

Redesign / Rebuild of Client Website

A Client of ours asked us to build a simpler version of their website designed from many years ago. Investigating the back-end system even we were confused by its structure and system, and found its base not developed since 2007.

Touching upon the current site design, we managed to add some parts to WordPress’s default Twenty Twelve template to almost look the same. This was our first step into WordPress’s coding and template modifications and set us on the path to our own redesign!

Other aims of the redesign was to make it a lot easier for the client to update their own website, improve interest via social media, and if business improved; have a dedicated person constantly keeping things moving with their project updates and client interaction.

Unfortunately as their old site automatically renewed itself, we held off from launching the new version while we look through paperwork for Domain name and cancelling their current contract.

One of our aims of service is to save our clients money. This client was paying around £300 a year for their site, their new one will cost much, much less once it on it own hosting and running, with cloud based or simple hosting, we estimate around £30-£40 per year with management and content creation.

To see what we can do for your tired looking site, or general advice to add functionality to it;  Contact us