I have been working on integrating the Chamber Dashboard plugins with WooCommerce (WC) to give our users payment options other than PayPal. As part of this WC integration, I have had to create products, orders and add line items to the orders to show the custom information coming in from our plugins. Although there is a ton of documentation when it comes to WC, I had to struggle to get the line items added correctly. This was especially difficult because the orders were being created from the admin side and not by the user.

There is a front end form that comes with the Member Manager plugin that users use to either register their business for the first time or renew their businesses with the Chambers. Either way, when they fill out the form, there is an invoice being created on the back end which gets sent to the user who would pay with either a check or using PayPal.

Since we are replacing PayPal with whatever payment options are set in WC, the users will be taken to the order page when they submit the form. When the chambers decide to use WC payments, an order gets created along with the invoice when the form is filled. But this order by default only has the product information (products here are the membership levels that have been already set).

Why are line items needed here?

The chambers can choose to add processing fee, tax, or donation amount fields to the front end form, which need to be added to the WC order as well. These numbers usually change for each order, so they have to be added to the order when the order is created (when the front end form is filled out). Fortunately, WC has an easy way of adding line items to the orders using the function wc_add_order_item().

Below is the function used to add an order in WC. As part of that process, wc_add_order_item() is called which creates the line items with the information from the form.

Creating a new order in WooCommerce

//Create a new order in WooCommerce
function cdashmm_create_wc_order($address, $product_id, $total, $customer_id, $donation, $tax, $processing_fee){
   if(cdashmm_check_mm_connected_to_wc()){
       global $woocommerce;
       $args = array(
           'customer_id'   => $customer_id,
           'created_via'   => 'Chamber Dashboard Member Manager',
           'add_order_note' => 'Created via Chamber Dashboard Member Manager');
       // Now we create the order
       $order = wc_create_order($args);
       // The add_product() function below is located in /plugins/woocommerce/includes/abstracts/abstract_wc_order.php
       $order->add_product( get_product($product_id), 1); // This is an existing SIMPLE product
       $order->set_address( $address, 'billing' );
       $order->set_created_via(  $args['created_via'] );
       $order->add_order_note( $args['add_order_note'] );
       $order->set_total( $total );
       $order->update_status("Completed", 'Imported order', TRUE);
       $order_id = $order->id;
               
       if($donation){
        $item_id = wc_add_order_item($order_id, array('order_item_name'    =>    __('Donation', 'cdashmm'), 'order_item_type'    =>    'fee'));
          if ($item_id) {
           wc_add_order_item_meta($item_id, '_line_total', $donation);
           wc_add_order_item_meta($item_id, '_line_tax', 0);
           wc_add_order_item_meta($item_id, '_line_subtotal', $donation);
           wc_add_order_item_meta($item_id, '_line_subtotal_tax', 0);
          }
       }
       if($processing_fee){
        $item_id = wc_add_order_item($order_id, array('order_item_name'    =>    __('Processing Fee', 'cdashmm'), 'order_item_type'    =>    'fee'));
          if ($item_id) {
           wc_add_order_item_meta($item_id, '_line_total', $processing_fee);
           wc_add_order_item_meta($item_id, '_line_tax', 0);
           wc_add_order_item_meta($item_id, '_line_subtotal', $processing_fee);
           wc_add_order_item_meta($item_id, '_line_subtotal_tax', 0);
          }
 }
       if($tax){
        $item_id = wc_add_order_item($order_id, array('order_item_name'    =>    __('Tax', 'cdashmm'), 'order_item_type'    =>    'fee'));
          if ($item_id) {
           wc_add_order_item_meta($item_id, '_line_total', $tax);
           wc_add_order_item_meta($item_id, '_line_tax', 0);
           wc_add_order_item_meta($item_id, '_line_subtotal', $tax<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>);
           wc_add_order_item_meta($item_id, '_line_subtotal_tax', 0);
       }
 }
   }
   return $order_id;
}

In the function above, the wc_add_order_item() is called for each line item that needs to be created.
For example, if there is a donation field enabled on the front end form, I would like to include the donation amount as a line item in the order.

if($donation){
   $item_id = wc_add_order_item($order_id, array('order_item_name'    =>    __('Donation', 'cdashmm'), 'order_item_type'    =>    'fee'));
  if ($item_id) {
    wc_add_order_item_meta($item_id, '_line_total', $donation);
    wc_add_order_item_meta($item_id, '_line_tax', 0);
    wc_add_order_item_meta($item_id, '_line_subtotal', $donation);
    wc_add_order_item_meta($item_id, '_line_subtotal_tax', 0);
  }
}

So, this creates a line item with the value of donation from the user submitted form. The same is done for Processing Fee and the tax. Here is a screenshot of the WC order on the back end with processing fee and the tax added as items to the order. The donation was disabled on the site. So, it was not added to the order.

 

Adding line items to WooCommerce order

This enables us to store all the order information in one place and the total now correctly reflects the items in the order.

 

WordPress 4.9 was released last week with many new improvements. One of the new features is the ability to add a gallery in the widgets which is a very cool feature. Multiple images can be added at once and the images can be displayed in one or more columns along with the ability to select the size and order of images. This is useful if you want to display flyers for upcoming events or showcase sponsors, award winners etc.

But, the gallery widget also comes with its own limitations like not being able to create a slideshow with the gallery images. Making the gallery images into a slideshow allows you to add more images and not worry about losing space on the sidebar.

The gallery images can be converted into a slideshow/rotating images by adding some simple CSS and JavaScript code. Even if you are not a person who likes to code, don’t worry. This is very easy and simple.

First create your gallery.

  • Go to Appearance -> Widgets.
  • Drag the gallery widget onto the sidebar. Let’s give it a title of ‘Our Sponsors’
  • Then click on ‘Add Images’ and select the images you would like to add to the gallery.
  • Once you select the images, you can organize them in the order you would like.
    • Change the gallery settings if you wish. I set the ‘Link to’ field as none as I do not want to link the image. You can either link it to the attachment page or the media file.
    • Change the number of columns based on how you would like to place your images. Since I selected 4 images in my gallery, I set the columns to 2 so that the images will show up in a nice square. Of course, if we are making the gallery into a slideshow, set the columns to 1.
    • If you select the random order, every time you load your page, the order of the images will change.
    • You can also select the size of the images.
  • Click on ‘Insert Gallery’ to add the images to the widget.
WordPress gallery edit screen

Gallery Edit Screen

  • Click on the ‘Save’ button to display the gallery on your sidebar.

This is how the gallery will look on the front end.

Now it is time to add some code to make the gallery widget into a slideshow. We will be adding some custom CSS and JavaScript code. There are a number of ways to add custom CSS and JS to your WordPress site. You can either use a plugin or add it to your child theme.

Here are some plugins:

Here are some tutorials too if you do not want to use a plugin.

I used the Simple custom CSS and JS plugin to demo the slideshow.

Here is the markup of the gallery:


<section id="media_gallery-3" class="widget widget_media_gallery">

<h2 class="widget-title">Our Sponsors</h2>

<div id="gallery-1" class="gallery galleryid-7 gallery-columns-1 gallery-size-thumbnail">


<figure class="gallery-item active_slide">

<div class="gallery-icon landscape"><img class="attachment-thumbnail size-thumbnail" sizes="(max-width: 150px) 100vw, 150px" srcset="" alt="" width="150" height="150" /></div>

</figure>



<figure class="gallery-item">

<div class="gallery-icon landscape"><img class="attachment-thumbnail size-thumbnail" sizes="(max-width: 150px) 100vw, 150px" srcset="" alt="" width="150" height="150" /></div>

</figure>



<figure class="gallery-item">

<div class="gallery-icon landscape"><img class="attachment-thumbnail size-thumbnail" sizes="(max-width: 150px) 100vw, 150px" srcset="" alt="" width="150" height="150" /></div>

</figure>



<figure class="gallery-item">

<div class="gallery-icon landscape"><img class="attachment-thumbnail size-thumbnail" sizes="(max-width: 150px) 100vw, 150px" srcset="" alt="" width="150" height="150" /></div>

</figure>


</div>

</section>

Since we can add any number of gallery widgets per page or per sidebar, we need to choose exactly which gallery widget we want to convert to the slideshow. For example, I have two gallery widgets in my sidebar, but I only want the first one as a slideshow. So, I will use the widget id to target that particular gallery. Here are a couple of ways to find out the widget id:

Once you have the widget id, you are ready to add the code.

Custom CSS:

#media_gallery-3 figure.gallery-item{
 	position:absolute;
  	display:none;
}

.gallery {
    margin-bottom: 15em;
}

#media_gallery-3 figure.gallery-item.active_slide{
  z-index:99;  
  display:block;
}

JavaScript code:


jQuery(document).ready(function( $ ){
    // Your code in here
   jQuery("#media_gallery-3 .gallery figure.gallery-item").first().addClass("active_slide");
    setInterval( "gcs_gallery_slideshow()", 5000 );
  });

function gcs_gallery_slideshow(){
  //var $next = $('.section.selected').removeClass('selected').next('.section');
  var $next = jQuery("#media_gallery-3 .gallery figure.gallery-item.active_slide").removeClass("active_slide").next(".gallery-item");
if ($next.length) {
    $next.addClass("active_slide"); 
}
else {
    jQuery("#media_gallery-3 figure.gallery-item:first").addClass("active_slide");
}
  //console.log("test");
}

There are a couple of things to remember.

  • Replace #media_gallery-3 with your widget id.
  • The number 5000 in the code is the speed of transition and equals 5 seconds. You can change the number as needed.

You can see a demo of the gallery slideshow here.

WordPress menus make it very easy to add navigation to your WordPress pages. You can have multiple menus on the same page. Although images for WordPress menus are not very SEO friendly and make it difficult to edit menu items, there are times when you would like to add background images to the menu. If you wish to use a specific font which is not rendered by the web, images are the best option.

To create a menu in wordpress, use . For more information, see the WordPress codex on menus

Once you register the menus, you can see them on the wp-admin panel under Appearance->menus. Then add the pages you want on your navigation.

 

Add the menu to your theme.

Add the css styles for the menu.

#nav{
margin-left:440px;
height:auto;
overflow:hidden;
margin-top:35px;
}

#nav li{
list-style-type:none;
float:left;
}

#nav li a{
color:#38830a;
text-decoration:none;
display:block;
font-family:Verdana, Geneva, sans-serif;
font-size:18px;
}

#nav li a:hover{
color:#600;
text-decoration:none;
}

#nav li.current-menu-item a{
color:#600;
text-decoration:none;
}
Now, upload all the background images you would be using for the menu using media->add new from the WordPress admin panel. Each menu item should have its own background image. Open up the first image in the media gallery and copy the image url.

Entering the rollover image url

Come back to appearance->menus and click on the down arrow on the right of the first menu item. This will allow you to edit the navigation label and the Title Attribute. The navigation label is the one that will show up on your page. You need to add an image tag in the navigation label instead of the menu title.

Expanding the menu

Add this image tag in the Navigation Label. Paste the image url in the src attribute and the name of the page in the alt attribute and save it. When you refresh your site, you should see the image showing up in the place of the first menu item.

Menu showing the final image

Add the rest of the images in a similar manner.

Leave a Reply