Post-Order Messaging Plugin and Tweaks

If you are looking for a decent way to have post-order messaging stay on your platform instead of via emails between your vendors and their customers, then check out N-Media’s Vendor and Member Conversation plugin. However, it is not perfect since it was not the primary purpose of their plugin (we actually commissioned them to make their plugin compatible with WCMp). If this helps you, consider buying me a beer. It took a lot of work to do, came with a cost, and took awhile to write up after the fact.

You will need both “Vendor and Member Conversation” and well as the Pro plugin to really get anything out of it.

This is written up using Woocommerce 4.6.1, WCMp 3.5.10, WooCommerce Vendor and Member Conversation 5.7, and WooCommerce Vendor and Customers Conversation PRO 5.0. Note: If you have trouble with the latest version of the base plugin, consider asking them for a copy of Vendor and Member Conversation Version 5.7… to date I have been unsuccessful in getting anything newer to work on my site.

To make it professional and frankly, usable at all, I had to make a series of tweaks which I will share with you here.

Tweaks: Customer Experience

On my site, I’ve made “My Orders” be the default My Account page. I’ve also changed the terminology of Order/Suborder to Purchase ID and Order, so that vendors and customers are speaking the same language. No one cares about suborders and parent orders and nor should they… so I took the word “order” out of the equation for the parent order. Conversations between vendors and customers are no longer confused as to which order or suborder they are talking about. I believe I was able to accomplish this with just the Loco Translate plugin, but I may have had to make some changes to overridden templates.

Customer My Account / My Orders Page

So here is what the My Account pages look like. I used an admin account here and it shows tabs for vendor dashboard and a link to our vendor collab group on FB, which wouldn’t be shown to the average customer, but you can get this point. I use the Suki theme for all of my WordPress sites.

I used some CSS to tweak the My Orders table. For the Order # link, I used ‘pointer-events: none’ to make it unclickable, removed the button to view the main order, and some misc formatting. I should actually go through and edit/override the php file now that I’m better at it, but this works.

CSS:

/* make the main order number unclickable */
td.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-number {
pointer-events: none;
}
/* remove the view order button, page-id may not be necessary */
.page-id-113 a.woocommerce-button.button.view {
display: none;
}
/* make the color of the main order number link black */
td.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-number a {
color: black;
}
/* format the pay button, displayed for pending payment status */
a.woocommerce-button.button.pay {
display: block;
width: 100%;
margin-bottom: 5px;
height: 100%;
}
/* format the cancel button, displayed for pending payment status */
.woocommerce-button.button.cancel {
display: block;
width: 100%;
height: 20px;
padding: 0;
background: none;
border: none;
color: #1976d2;
}
/* fix a display issue in mobile for pay button*/
@media only screen and (max-width:767px) { a.woocommerce-button.button.pay {
display: inline-block;
}}
/* make the cancel button into a link instead of a button */
a.woocommerce-button.button.cancel:hover {
background: none;
color: black;
}
/* format the suborder area */
th.woocommerce-orders-table__header.woocommerce-orders-table__header-wcmp_suborder {
min-width: 300px;
}

Next I overrode the orders.php template file and added in the section for the box above the orders table. I added the text in at line 25. For context:

<!-- Add around Line 25 -->
<h3 class="suborders_description"> To message a vendor, click the Order Number assigned to that vendor in the second column below. If messaging your vendor does not get the desired results, please <a href="https://example.com/contact">Contact the Admin</a>. Orders of only gift cards will only have a purchase ID.</h3>

I’ve found that this quick explainer text almost completely eliminated order questions to the site admin, as well as some additions to that contact form itself. I gave it the class and then added CSS to style it, including some extras for formatting the suborder list area. Here is what I used:

/* format new description box */
h3.suborders_description {
border: 1px solid #e5e5e5;
padding: 12px;
background: aliceblue;
}
/* fix link color inside new description box */
h3.suborders_description a {
text-decoration: underline;
color: blue;
}
/* fix format of vendor suborder list and highlight */
ul.wcmp-order-vendor {
padding-left: 0px;
background: aliceblue;
}

Customer Single Order Page

For inside the actual suborder in the customer My Orders list, I only had to add CSS to make the chat box display appropriately with my theme:

/* fix width of upload section to match main chat box */
.nm-uploader-area {
max-width: initial;
}

Email Notification of a New Message

Finally, a tweak to the way the “new message” email notification looks. The problem I was having was that no matter what, customers were just replying to the email instead of clicking the link in the email to go back into the messaging system.

I would really love a way to enable replying to the email itself, but until then, here is what I did:

  1. I added text to the top of the message that said “please don’t reply”, but that alone did not solve the problem.
  2. I created an auto-reply to the “from” admin email address in my email client, thanking them for the email and instructions on how to message the vendor.
  3. I turned the “click here to reply” link into a button so that it stood out. In plugin-class.php, I made the following changes starting around line 607 or so.
    $message        .= '<br><br>';
    $message        .= '<a href="'.esc_url($order_detail_url).'"><button style="padding-top:15px; padding-bottom:15px; padding-left:15px; padding-right:15px; background-color:#15518c; color:white; width:100%; border-radius:10px; text-align:center; font-size:15px;">'.__('View any attachments and reply here', 'wooconvo').'</button></a>';
    $message        .= '<br><br>';
    $message        .= '<em>Thank you for using our site for this purchase!<br>';
    //$message      .= 'Team '.get_bloginfo('name');

Here is the text I have chosen for my site’s email. Below this is now a button that says “View any attachments and reply here”, since only the message text is displayed. I’d love it if the attachment would be there, or at least a mention of a file being sent.

[ Please do not reply to this email, it will not be received ]

New message from %sender_name%. To view any attachments and reply to this message, please click the button below to go to the site’s messaging system.

” %message_text% “

Tweaks: Vendor Experience

Move the Chat Box

The default display for the vendor is not professional at all. It shows at the top of the Vendor’s single order page and is smashed to the left inside the customer details box. According to N-Media, it was not possible to add the box in anywhere else unless WCMp changes their code. So, I made a few of my own tweaks to make this better and more professional.

On my site, I had no need whatsoever for downloadable products functionality, so I chose to replace that code with the code to display the N-Media chat box. It is now located at the bottom of the single order page, next to the notes section. It requires overriding one WCMp template and hard coding a change to the N-Media plugin-class.php file.

To do this, I first had to override the WCMp vendor-order-details.php template and insert the info to make the WooConvo box appear:

<!-- NMEDIA ADDS - REPLACES DOWNLOADS SECTION WITH CHAT BOX -->
<div class="panel-heading">
<?php _e('Vendor-Customer Messaging :', 'dc-woocommerce-multi-vendor'); ?>
</div>
<div class="panel-body nmedia">
<?php do_action( 'wcmp_nmedia', $order, $vendor ); ?>
</div>
</div>
<!-- END NMEDIA ADDS -->

 Next I had to make a hard code change to NMedia’s plugin.class.php file to make the action match:

// WCMp Latest version
     add_action('wcmp_nmedia', array($this, 'wcmp_vendor_dashboard_2'), 99, 2);

Now, it should render where the downloads section would be, as with the previous picture. Remember that any updates of the N-Media plugin will require you to re-do the replacement of code in the plugin-class.php file every time.

Remove “Send Note to Customer” in the Tracking Panel

Now that we have a messaging system set up, we can remove the functionality for the vendor to send a note to the customer using the tracking info box on the right, and only leave the option for a private note.

To do this, we override the WCMp template html-order-notes.php. We can comment out the Note to Customer option value easily like this. For this version of WCMp it is on line 68:

                       <select name="note_type" id="order_note_type" class="form-control inline-input">
                                <option value=""><?php _e( 'Private note', 'woocommerce' ); ?></option>
                                <!-- <option value="customer"><?php _e( 'Note to customer', 'woocommerce' ); ?></option> -->
                        </select>
                        <input class="btn btn-default wcmp-add-order-note" type="submit" name="wcmp_submit_comment" value="<?php _e('Submit', 'dc-woocommerce-multi-vendor'); ?>">

Now, there is no longer the option to send a note to customer through this box, which is not absolutely necessary but it makes it more professional in my opinion.

My Wish List

If you made it this far, here is my current wish list for functionality on this. If by chance you have a solution I and the group would be very appreciative.

  • A way to filter out/replace with ******, all email addresses and/or phone numbers from the chat, to further encourage all communication to stay on the platform.
  • Attaching the uploaded file to the email, or at least something that says file attached.
  • Ability to just reply to the emails instead of having to go back to the site every time, have those replies both sent and captured in the chat box for posterity.
  • Adapting something like this for pre-order communication as well… but that would be a huge system I think.

I think that’s it for this! Whew! I had to go back and figure out a couple of years worth of changes, so please let me know if it looks like I missed something and I’ll take another look.

Is this no longer relevant or not working? Please let us know in the comments!

Comments on this post

Your email address will not be published. Required fields are marked *