{"id":1719351,"date":"2020-09-15T12:47:50","date_gmt":"2020-09-15T12:47:50","guid":{"rendered":"https:\/\/toolset.com\/?post_type=course-lesson&p=1719351"},"modified":"2021-01-26T15:58:33","modified_gmt":"2021-01-26T15:58:33","slug":"adding-toolset-blocks-to-the-woocommerce-my-account-page","status":"publish","type":"course-lesson","link":"https:\/\/toolset.com\/fr\/course-lesson\/adding-toolset-blocks-to-the-woocommerce-my-account-page\/","title":{"rendered":"Adding Toolset Blocks to the WooCommerce My Account Page"},"content":{"rendered":"\n

Let’s go over the most popular use-cases for customizing the WooCommerce “My Account” page with Toolset.<\/p>\n\n\n\n

Hide Additional Content from Visitors<\/h2>\n\n\n\n

Before actually adding anything to the “My Account” page, let’s make sure we display additional content only to logged-in Customers. Remember, visitors that are not logged-in could also reach this page. In this case, the custom content you add to this page wouldn’t make sense and most of it would render empty. <\/p>\n\n\n\n

Steps to display custom content on the “My Account” page only for Customer and Administrator roles:<\/p>\n\n\n\n

  1. Insert the Toolset Conditional<\/strong> block. Click the button to add conditions and a pop-up dialog appears.<\/li>
  2. In the left dropdown, select the Current user role<\/strong> option.<\/li>
  3. In the right dropdown, select the Other role<\/strong> option.<\/li>
  4. In the new dropdown that appears, select Customer<\/strong>.<\/li><\/ol>\n\n\n
    \n
    \"\"<\/a>
    Using the Toolset Conditional block to display content only to users with a Customer role<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n

    You will probably want the site’s administrator to also see this content on the front-end.<\/p>\n\n\n\n

    1. Still in the same dialog, click the plus <\/strong>button to add another condition.<\/li>
    2. This time, select Other role<\/strong> \u2192 Administrator<\/strong>.<\/li><\/ol>\n\n\n\n

      That’s it, click Accept<\/strong> and then put all your additional custom content inside the Conditional <\/strong>block.<\/p>\n\n\n\n

      Add a List of Posts Submitted by the Current User<\/h2>\n\n\n\n
      With Toolset, you can create forms so users can submit new content from the front-end<\/a>.<\/div>\n\n\n\n

      “My Account” page is a sensible place to show the current user a list of posts that they have submitted.<\/p>\n\n\n\n

      Use the following steps to create such View:<\/p>\n\n\n\n

      1. Edit the “My Account” page.<\/li>
      2. Insert the View <\/strong>block either before or after the block containing the woocommerce_my_account<\/strong> shortcode. <\/li>
      3. Create a new View, select the type of content you want to list, and design its output using blocks.<\/li>
      4. Click to select the main View <\/strong>block and in the right sidebar, expand the Content Selection<\/strong> section.<\/li>
      5. In the Query Filters<\/strong> sub-section, click Add a filter<\/strong>.<\/li>
      6. In the dialog that appears, select to filter by Post author<\/strong> and click Add query filter<\/strong>.<\/li>
      7. In the right sidebar, select the Post author is the same as the logged in user <\/strong>option and click Save<\/strong>.<\/li><\/ol>\n\n\n\n

        Users will now see a list of the posts they submitted.<\/p>\n\n\n

        \n
        \"\"
        WooCommerce “My Account” page with a list of posts submitted by the current user<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n
        You might want to also allow them to edit or delete their posts. You can learn more about this in the lesson about allowing users to manage their items<\/a>.<\/div>\n\n\n\n

        Add Extra User Fields to the My Account Page<\/h2>\n\n\n\n

        WordPress provides some basic fields for user profiles like name, nickname, email, website, and more.<\/p>\n\n\n\n

        With Toolset, you can add any custom fields to your user profiles:<\/p>\n\n\n\n

        1. Go to Toolset <\/strong>\u2192 Custom Fields<\/strong>, click the User Fields <\/strong>tab, and then the Add New Group<\/strong> button.<\/li>
        2. Give a name to your new group of custom user fields.<\/li>
        3. Click the Add New Field <\/strong>button to add a field. You can add any number of fields.<\/li><\/ol>\n\n\n\n

          Now, all user profiles will include the fields you added.<\/p>\n\n\n\n

          Of course, you can then also display them on the front-end:<\/p>\n\n\n\n

          1. Edit the “My Account” page.<\/li>
          2. Insert the Fields and Text <\/strong>block either before or after the block containing the woocommerce_my_account<\/strong> shortcode. You can use any number of Fields and Text<\/strong> blocks.<\/li>
          3. In the editor of the Fields and Text <\/strong>block, click the Views <\/strong>button.<\/li>
          4. In the pop-up dialog that appears, you can find your custom group of user fields. Click the user field you want to insert. <\/li>
          5. Select the option to display the field for the current logged in user and click Insert shortcode<\/strong>.<\/li><\/ol>\n\n\n
            \n
            \"\"<\/a>
            Custom user fields displayed on the WooCommerce “My Account” page<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n

            Further Customization of the Custom Content<\/h2>\n\n\n\n

            Besides adding custom content to the “My Account” page, you can use any 3rd-party blocks for designing.<\/p>\n\n\n\n

            For example, if you want to display all your extra custom information inside tabs, we suggest using Kadence Blocks<\/a>. Their Tabs block provides horizontal and vertical tabs with great designing options.<\/p>\n","protected":false},"author":17621,"featured_media":1773519,"template":"","related-lesson":[8445],"class_list":["post-1719351","course-lesson","type-course-lesson","status-publish","has-post-thumbnail","hentry","related-lesson-e-commerce"],"_links":{"self":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson\/1719351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson"}],"about":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/types\/course-lesson"}],"author":[{"embeddable":true,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/users\/17621"}],"version-history":[{"count":8,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson\/1719351\/revisions"}],"predecessor-version":[{"id":1776229,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson\/1719351\/revisions\/1776229"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/media\/1773519"}],"wp:attachment":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/media?parent=1719351"}],"wp:term":[{"taxonomy":"related-lesson","embeddable":true,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/related-lesson?post=1719351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}