GDPR Avatar Privacy in WooCommerce

This is narrow mobile ‘phone version of the blog post. The full version will display with a greater device width.

Why and How we use GDPR Avatar Privacy in WooCommerce

Data Stream World is using the Avatar Privacy plugin to help us to meet our GDPR obligations. Avatar Privacy lists some plugins that it is known to work with but does not mention WooCommerce. This article explains how we have integrated the plugin on our WooCommerce site.

Most users of a WooCommerce site will have the default customer role which does not provide access to the backend where a user’s Avatar Privacy settings can be found. So, there is a need to provide the user with a settings form in the frontend. From the Avatar Privacy Changelog we see that release 2.3.0 provides a shortcode [avatar-privacy-form] to allow for Avatar Privacy settings on the frontend of a site. This article explains how we have exploited this to integrate Avatar Privacy within the default WooCommerce dashboard.

Our site does not offer product downloads (we sell physical books), so we have used the ‘Downloads’ tab in the My Account dashboard and changed it to ‘Avatar’. However, there are steps you can take to add an additional tab for ‘Avatar’ in the ‘My Account’ dashboard if that’s what you need to do. Such variations are covered later when we discuss adding the ‘Delete Me’ plugin and a frontend form for user self deletion.

Steps for the GDPR Useful ‘Avatar Privacy’ Form

1. Install and activate the Avatar Privacy plugin.
2. Because we are using the ‘Downloads’ tab in the ‘My Account’ dashboard we copied the WooCommerce plugin file named ‘downloads.php’ from folder ‘templates/myaccount’ and placed it appropriately in our child theme.  The only code needed in this file is:
   <?php echo do_shortcode( '[avatar-privacy-form]' );

3. Guided by Customising the WooCommerce ‘My Account’ under heading ‘Time to Customize’ point ‘2. Change the menu tab name and icon’ we did the following:
   • In the $menuOrder array, we changed the ‘downloads’ value so that the tab description reads ‘Avatar’:
     'downloads' => __( 'Avatar', 'woocommerce' ),
   • we added the following to style.css in our child theme:
     .woocommerce-MyAccount-navigation ul
     li.woocommerce-MyAccount-navigation-link-
     -downloads a::before {
          content: "\f2bd";
     }
     This shows the Font Awesome user-circle icon in place of the previous downloads icon.
4. Guided by Changing the titles on My Account pages in Woocommerce, since we are using the downloads endpoint, we added this to our child functions.php:

   add_filter( 'woocommerce_endpoint_downloads_title',
     'change_my_account_downloads_title', 10, 2);
function change_my_account_downloads_title( $title,
     $endpoint ) {
          $title = __( "Avatar Privacy", "woocommerce" );
         return $title;
}

5. We changed the ‘Dashboard’ tab description about what you can do from the account dashboard.  So, we copied file named ‘dashboard.php’ from folder ‘templates/myaccount’ and placed it appropriately in our child theme.  Then the code change in this file was to replace:
   printf(
      __( 'From your account dashboard you can view your
           <a href="%1$s">recent orders</a>,
      manage your <a href="%2$s">shipping and billing addresses</a>,
      and <a href="%3$s">edit your password and account details</a>.',
           'woocommerce' ),
      esc_url( wc_get_endpoint_url( 'orders' ) ),
      esc_url( wc_get_endpoint_url( 'edit-address' ) ),
      esc_url( wc_get_endpoint_url( 'edit-account' ) )
);
   with the following:
   printf(
      __( 'From your account dashboard you can view your
          <a href="%1$s">recent orders</a>,
      manage your <a href="%2$s">shipping and billing addresses</a>,
      edit your <a href="%3$s">password and account details</a>
      or manage your <a href="%4$s">avatar</a>.', 'woocommerce' ),
      esc_url( wc_get_endpoint_url( 'orders' ) ),
      esc_url( wc_get_endpoint_url( 'edit-address' ) ),
      esc_url( wc_get_endpoint_url( 'edit-account' ) ),
      esc_url( wc_get_endpoint_url( 'downloads' ) )
);

The above steps complete our changes to make the Avatar Privacy form available within the ‘My Account’ dashboard in place of ‘Downloads’. If you would like to see the changes in action please go to the Data Stream World site and register. Don’t worry, you will be able to delete your account immediately! That’s because, further in the spirit of GDPR, we have implemented a ‘Delete Me’ form in the ‘My Account’ dashboard.

So to implement the ‘Delete Me’ form we now required an additional tab in the ‘My Account’ dashboard as there wasn’t a further one we could repurpose.

Steps for the GDPR Useful ‘Delete Me’ Form

Here’s what to do to implement the GDPR useful ‘Delete Me’ form.

1. Install and activate the ‘Delete Me’ plugin.
2. In Admin/Settings/Delete Me:
   • Under heading ‘Roles’, select the roles that can delete themselves according to what’s appropriate for your site.
   • Under heading ‘Shortcode’:
     1. check ‘Use Form Instead of Link’
     2. in the form we changed:
        WARNING!<br /><br />
     Are you sure you want to delete user
     %username% from %sitename%?
        to be:
        WARNING: &nbsp; &nbsp; Account Deletion Imminent.<br /><br />
     Are you sure you want to delete user
     %username% from %sitename%?
        as we thought that was clearer. Don’t forget to ‘Save Changes’.
   • Under heading ‘Miscellaneous’:
     1. We chose ‘Delete Comments’ which seems consistent with the right to be forgotten.
     2. We chose ‘E-mail Notification’ since our administration is notified when a user registers, so this complements that registration by notify administration of the deletion.
3. There is a lot of material on the topic of adding a new tab in the ‘My Account’ dashboard and we tried much of it with partial success. In the end the answer for us was found at heading “Adding a Custom Endpoint” within Change, Edit & Rename WooCommerce Endpoints in My Accounts Page. Following the advice there we modified the code in the easily identified places suggested:
   • Changing “My Stuff” to “Delete My Account” for the tab description and “Delete This Account” for the page title:
     // Insert your custom endpoint.
$items[ self::$endpoint ] = __( 'Delete My Account', 'woocommerce' );
// New page title.
$title = __( 'Delete This Account', 'woocommerce' );
   • We called our endpoint ‘account-delete’:
     public static $endpoint = 'account-delete';
   • For the endpoint content you probably need to use a version of the plugin shortcode using opening and closing tags. This accommodates the case where not all roles are authorized to delete themselves. For our case, only subscribers and customers are allowed to self delete. So, for the endpoint content we have:
     /**
* Endpoint HTML content.
*/
public function endpoint_content() {
      echo do_shortcode( "[plugin_delete_me]
          Your role is not one that allows self deletion.
          Please use the 'Contact Us' facility under 
          'More Company Information' to request that
          your account be deleted.
          [/plugin_delete_me]" );
}
     This results in the ‘Delete Me’ form being displayed for roles that are allowed to self delete and for others the message in the shortcode content is displayed.
4. Then it is suggested we add the modified code as a plugin. Consequently, we did this:
   • Created a folder called ‘my-account-delete’ within the ‘plugins’ folder.
   • Named our modified code ‘my-account-delete.php’ and saved it within the new folder.
   • From WooCommerce Endpoint Order and Rename – My Account Page v2.6+ we see in the comments that users are having trouble making this code take effect. A suggestion was to include the code in ‘functions.php’, which contradicts having it as a plugin. So we deleted the statement:
     new My_Custom_My_Account_Endpoint();
     from ‘my-account-delete.php’ and placed that statement in our theme’s ‘functions.php’ so that we’re invoking the constructor there.
   • Then we looked for the plugin name ‘WooCustom My Account’ in our Plugins and activated it.
   • We flushed the permalinks.
5. To use the Font Awesome user-slash icon we added to style.css in our child theme:
   .woocommerce-MyAccount-navigation ul
      li.woocommerce-MyAccount-navigation-link-
      -account-delete a::before {
           content: "\f506";
      }

And that’s it. The result is as seen in the image at the head of this post.

This is narrow mobile ‘phone version of the blog post. The full version will display with a greater device width.